Utilizar nuestra fuente de texto en la web HTML5

Publicada el por

Veamos un ejemplo de cómo utilizar una fuente de texto propia (subidas al servidor) en nuestra página web creada con HTML5. Tocaremos un poco de CSS y formatos de fuentes para que sean compatibles con el mayor número de navegadores y sistemas operativos que hay.

Tutoriales programación

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:

.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/)

@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 una fuente de texto propia en una web creada con HTML5 sin problemas.

Más información