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

Creación página web – Los pasos La creación de una página web profesional requiere unos pasos previos. Se puede optar por esas soluciones que anuncian en la TV de crea tu página en 1...
CSS – Estilo print que quite enlaces Cuando configuramos un estilo CSS print para una página, cuando se imprime ésta, resulta que muestra los enlaces. Debajo de las imágenes, enlaces, deb...
CodeIgniter – Ejemplo Hello World Siguiendo con el post de qyer, os adjunto un pequeño vídeo demostrativo de la programación con el Framework PHP llamado CodeIgniter. El ejemplo es el ...
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. ...

Deja un comentario

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

*