Fuentes en CSS con font-face

Fuentes en CSS con font-face
Fuentes en CSS con font-face
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

¡Comparte nuestro contenido!

La regla @font-face permite que podamos cargar fuentes propias a nuestro proyecto. Básicamente, esta regla le indica al navegador que descargue la fuente del lugar donde este hospedada y la muestre. Los formatos que soporta son: TTF, OTF, WOFF, WOFF2, SVG y EOT.

Son tres propiedades principales, las que conforman está regla:

  1. src: contiene la url de la fuente.
  2. font-family: define el nombre que se le va a asignar
  3. format: especifica el formato a utilizar, es opcional.

Probemos @font-face con un ejemplo

Necesitamos algo de texto, coloquemos en un documento HTML lo siguiente:

<h1>Bienvenidos a CableNaranja</h1>
<p>Somos un blog sobre diseño web, desarrollo de aplicaciones y Blogging. Te ofrecemos artículos sobre:</p>
<ul>
   <li>Wordpress</li>
   <li>HTML y CSS</li>
   <li>PHP</li>
   <li>Phooshop</li>
   <li>Y muchos otros temas</li>
</ul>

Que de momento, se ve así.

Fuentes en CSS con Font-Face, CableNaranja

Lo siguiente que haremos, será crear una carpeta en nuestro proyecto donde pondremos al menos 3 fuentes de dominio público que hemos descargado de dafont. También haremos una carpeta css, para colocar nuestras hojas de estilo ahí.

Fuentes en CSS con Font-Face, CableNaranja

Nuestro primera hoja de estilos, se llamará fuentes.css, recuerde que este archivo se guardará en la carpeta llamada CSS. Su contenido es el siguiente:

@font-face{
   src: url(../fonts/BD_Cartoon_Shout.ttf);
   font-family: Cartoon;
}

Como se puede observar, cargamos la fuente, haciendo alusión a la carpeta donde se encuentra físicamente el archivo, los 2 puntos (..) sirven para que el navegador sepa, que debe buscar desde la raíz del proyecto y no desde la carpeta CSS. Repitamos lo mismo para las otras 2 fuentes que nos faltan.

@font-face{
   src: url(../fonts/BaksoSapi.otf);
   font-family: Bakso;
}
@font-face{
   src: url(../fonts/Balham.otf);
   font-family: Balham;
}

Nos hace falta la hoja de estilos que aplique estas fuentes, crearemos un archivo llamado estilos.css que usaremos para aplicar estilos al título, párrafo y elementos de lista respectivamente, este es el código:

h1{
   font-family: Cartoon;
   font-size: 4em;
   color: #AA1100;
}
p{
   font-family: Bakso;
   font-size: 1.4em;
}
li{
   font-family: Balham;
   font-size: 1.2em;
}

Observe como aplicamos una fuente diferente a cada estilo. Para finalizar, coloquemos los enlaces a nuestras hojas de estilo en el archivo HTML que hicimos al principio:

<link href="css/fuentes.css" rel="stylesheet" type="text/css" />
<link href="css/estilos.css" rel="stylesheet" type="text/css" />

El resultado es el siguiente:

Fuentes en CSS con Font-Face, CableNaranja

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

También te podría gustar...

Deja un comentario

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

shares