Fuentes en CSS
El profesor mostró como podemos importar Fuentes desde Google Fonts, pero también compartió los assets en Dropbox y podemos usarlos en nuestro proyecto tan facil como al importarlos desde Google y con una mejora en el rendimiento para proyectos más pesados!
Importar fuentes locales
Para llamar una fuente que está entre nuestros archivos usamos el selector @font-face que luego llenamos con ciertas propiedasdes para que CSS entienda de qué hablamos.
@font-face {
font-family: '<nombre de la fuente>';
src: url('<path de los archivos>');
font-style: normal | italic;
font-weight: thin | regular | bold | 400;
}
font-familyllevará el nombre que nosotros queremos ponerle a la fuente; así como puede ser "Roboto", también podemos llamarla "Juanito"srcindica la ubicación del archivo, puede ser en los archivos locales o una url.font-styleyfont-weightespecifican las condiciones en las que se muestra esta fuente en particular.
Pero... ¿Cómo traigo versiones de la misma fuente?
Esto es fácil, toca crear un @font-face por cada version de la fuente que necesites, ambas pueden tener el mismo font-family ya que font-style / font-weight dirán cuál versión usar en cada caso.
.
.
¡Ahora para user este estilo solo falta usar las propiedades como has hecho durante toda tu carrera! :D
Ejemplo de la fuente Roboto en thin, regular y bold:
@font-face {
font-family: 'Roboto';
src: url('font/Roboto/Roboto-Thin.ttf');
font-style: normal;
font-weight: 300;
}
@font-face {
font-family: 'Roboto';
src: url('font/Roboto/Roboto-Regular.ttf');
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Roboto';
src: url('font/Roboto/Roboto-Bold.ttf');
font-style: normal;
font-weight: 700;
}