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.

Información relacionada

Deja un comentario

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

*