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

GroundWork CSS – 03 – Framework HTML5 ... Tercer de los 4 vídeos del tutorial de GroundWork, un framework para la creación de página web responsive. En este caso, veremos como crear botones de...
GroundWork CSS – 02 – Framework HTML5 ... Segundo vídeo que muestro cómo estructurar una página web responsive para que se muestre de forma correcta en web y en dispositivos móviles. ...
Algunas Responsive templates Últimas actualizaciones en los recursos de programación. Dos enlaces a Responsive templates, o lo que es lo mismo, plantillas HTML5 y CSS3 que pueden ...
Poner icono favicon a nuestra web Favicon viene del inglés favorites icon. Si os fijáis en la barra de navegación, al lado del enlace de este blog, hay un pequeño icono ( nuestro logo ...

Deja un comentario

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

*