@font-family

Si quisieramos escribir nuestros trabajos con distintos tipos de fuentes a las que un usuario tiene instaladas en su sistema, deberiamos aprender a usar @font-family en CSS.

@font-family

Las reglas @ en CSS son maneras de encapsular varias reglas juntas en una declaración para servir como instrucciones para el procesador CSS del navegador.

@font-family

1. Subir el archivo de fuente a los servidores.

Existen distintos formatos de fuente:

EOT --> Internet Explorer
WOFF --> Web Open Font Format
OTF --> Open Type
TTF --> True Type
SVG --> Scalable Vector Graphics

Recomendado usar formato SVG que es el formato que casi todos los navegadores soportan

@font-family

2. Nombrar, describir y vincular con los archivos de fuente una regla @font-face.

@font-family

2.

@font-face {
font-family: 'AcknowledgementMedium';
src: url('../fonts/Acknowledgement-webfont.eot');
src: url('../fonts/Acknowledgement-webfont.eot?#iefix') format('eot'),
url('../fonts/Acknowledgement-webfont.woff') format('woff'),
url('../fonts/Acknowledgement-webfont.ttf') format('truetype'),
url('../fonts/Acknowledgement-webfont.svg#webfontuCYqM11k') format('svg');
font-weight: normal;
font-style: normal;
}

@font-family

3. Incluir el nombre de la fuente con font-family, al elemento que queramos.

#wrapper{

font-family:AcknowledgementMedium;

}

@font-family

API Google Fonts

Podemos visualizar cientos de tipos de fuentes, enlazando nuestro proyecto al servidor de google para usar el tipo de fuente que queramos dentro de las opciones posibles.

Simplemente enlazando en nuestro head a la dirección que nos indica la API .

Podemos incluso enlazar muchas fuentes distintas.

@font-family

API Google Fonts

Aquí enlazamos varios tipos de fuentes que después serán asignadas al elemento de nuestro proyecto que queramos.

<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed|Libre+Barcode+39+Text|Princess+Sofia" rel="stylesheet">

font-family: 'Libre Barcode 39 Text', cursive;

font-family: 'Encode Sans Condensed', sans-serif;

font-family: 'Princess Sofia', cursive;

Para más slides sobre CSS:

https://bermartinv.github.io/css/files/taller/menu_taller.html