Fuentes personalizadas en nuestras webs

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-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-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-family: «FiraOpenType»;
    src: url(FiraSansOT/FiraSansOT-Regular.otf) format(‘opentype’);
}

Para esto mismo es muy interesante que veais Google Fonts

Rogama Informática

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.