Utilizar nuestra fuente de texto en la web

Desde hace mucho tiempo, que es recomendado utilizar fuentes genéricas (que normalmente tienen todos los equipos, ya sean windows, mac o Linux). Estamos hablando de los tipos Arial, Verdana, Tahomoa…

Porqué ? Porque si ponemos un tipo de fuente que el navegador no encuentra en nuestro equipo, utiliza la fuente por defecto. Vamos, que perdemos el control del diseño. Se utilizará un tipo de letra diferente al que pretendemos.

Igualmente, al declarar en nuestras hojas de estilo el tipo de fuente, podemos escoger varias poniéndolas en orden y si no encuentra uno, utiliza las otras. Ejemplo:

1
2
3
.miclase {
font-family: Tahoma, Verdana, Arial, sans-serif;
}

Pero hay maneras de utilizar la fuente que nosotros queremos, haciendo que el navegador la descargue y pueda utilizarla. Para ello, debemos seguir los siguientes pasos:

  1. Conseguir fuente en el formato EOT uqe necesitará el Internet Explorer. Lo normal es que podamos conseguir la fuente deseada en formato TTF
  2. Si es el caso, hay conversores online de fuente TTF a EOT ( ejemplo: http://www.kirsle.net/wizards/ttf2eot.cgi)
  3. Ya tenemos la fuente en formato TTF y EOT
  4. Subimos los dos ficheros a nuestro servidor. Yo los almaceno en la carpeta /css/
  5. Así pues, tenemos
    1. /css/mifuente.ttf
    2. /css/mifuente.oet
  6. Ahora, debemos crear el nuestra hoja de estilo, que llamaremos estilo.css, en la que se llame a las fuentes

Fichero estilo.css almacenado en la misma carpeta que las fuentes (/css/)

1
2
3
4
5
6
7
8
9
10
11
@font-face {
	font-family: mifuente;
	src: url("mifuente.eot") /* EOT file for IE */
}
@font-face {
	font-family: mifuente;
	src: url("mifuente.ttf") /* TTF file for CSS3 browsers */
}
body {
	font-family: mifuente, "Times New Roman", Georgia, Times, serif;
}

Como podemos observar se declaran las fuentes y posteriormente, la etiqueda que define al body, la declaramos con la font-family: mifuente; que es la que hemos subido nosotros.

Ahora ya se debería poder utilizar en la web sin problemas.

Artículos relacionados

MySQL – Listar registros aleatorios Pequeño código para que MySQL liste un determinado número de registros aleatoriamente. Ejemplo: En una tabla 'jugadores' tenemos los datos de los j...
Web Sniffer Para quien no la conozca, os hago llegar una interesante herramienta online encargada de leer los entresijos de una petición web. Cuando en nuestro na...
Apuntes librería JavaScript 3D Three.js Este fin de semana, y aprovechando las fiestas Navideñas, me he puesto a curiosear la librería Three.js Como normalmente tengo la cabeza casi llena de...
Imagen de fondo fijo ocupando toda la ventana Vamos a poner una imagen de fondo en nuestra web haciendo que ocupe toda la venta y que esté fija. La imagen se adaptará automáticamente al tamaño de ...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*