Para agregar una fuente personalizada (que no tenga el usuario instalada en su sistema como pueden ser las tipicas como Arial) deberemos declararla en nuestros estilos; para ello:
@font-face{ font-display:swap;
font-family: «Nombre de nuestra fuente»;
src: url(Ruta de nuestra fuente/Nombre del archivo.otf) format(‘opentype’);
}
y despues declararla en nuestros estilos como si fuera cualquier otra:
font-family: «Nombre de nuestra fuente»;
Los unicos tipos de fuente compatibles con todos los navegadores son: TTF y WOFF
Para usar un TTF tendremos que poner el formato como sigue:
format(‘TrueType’);
Tambien es recomendable no cargar una fuente personalizada, ya sea por url desde Google Fonts u otro site, o desde nuestro propio servidor, si el usuario ya tiene la fuente en cuestion en su dispositivo, para ello deberemos llamarla del sigueinte modo:
src: local(«Nombre de la Fuente»)
Todo junto seria algo asi:
@font-face{ font-display:swap;
font-family: «Nombre de nuestra fuente»;
src: local(«Nombre de nuestra fuente»), url(Ruta de nuestra fuente/Nombre del archivo.otf) format(‘truetype’);
}
Aqui os dejo un ejemplo:
body{
font-family: «FiraOpenType»;
}
@font-face{ font-display:swap;
font-family: «FiraOpenType»;
src: url(FiraSansOT/FiraSansOT-Regular.otf) format(‘opentype’);
}
Para esto mismo es muy interesante que veais Google Fonts
Apasionado de la montaña, del SEO y la programación a partes iguales, llevo más de 20 años trabajando en distintos sectores, pero siempre enfocado a la web, si quieres saber más de mí, sigue el enlace.
