El caballero perdedor

Recursos para juegos de rol

Calculadora de población   Quincalla   Acerca de este sitio

Cómo usar fuentes web alojándolas en tu servidor

Escribo esto porque mi impresión es que los tutoriales que he ido consultando están mal. O son incompletos, o son incomprensibles, o están alargados innecesariamente para hacer SEO.

Cómo se hace:

  1. Eliges una fuente de licencia abierta y la descargas. En https://fonts.google.com/ hay 1400 libres y disponibles. Conviene leer la licencia por si acaso.
  2. Normalmente, la fuente será una TTF. Hay que convertirla a WOFF2, un formato para web. Para la conversión, yo he usado este servicio online, https://cloudconvert.com/ttf-to-woff2, pero hay otros servicios similares. Hasta donde yo sé, no te devuelven la fuente con un "regalito".
  3. Dejas el archivo woff2 en un directorio. Por ejemplo, "fuentes", de manera que la URL absoluta sería: https://tuweb.com/fuentes/fichero.woff2
  4. En tu hoja de estilo, indicas la correspondencia entre la fuente css y el fichero:
    @font-face 
    {
       font-family: 'NombreArbitrarioDeLaFuente';
       src: url('/fuentes/fichero-de-la-fuente.woff2') format('woff2');
       font-weight: normal;
       font-style: normal;
    }
    
    Debes recordar que, aunque en Windows las mayúsculas y minúsculas son irrelevantes para un nombre de fichero, en Unix y Linux "Fichero.WoFF" y "fichero.woff" son dos archivos diferentes. Numerosos sistemas de alojamiento están basados en Linux. Puede que una mayoría. Por tanto, para evitarse problemas conviene usar sólo minúsculas en los nombres de archivo. Se podría usar mayúsculas sólo, pero la legibilidad es peor.
  5. Finalmente, en una clase CSS cualquiera, empleas la fuente, llamándola por el nombre que le has dado (NombreArbitrarioDeLaFuente). Por ejemplo:
    h1 
    { 
       font-family: 'NombreArbitrarioDeLaFuente', verdana, arial;
       font-size: 3em; 
       margin: 0em; 
       padding: 0em; 
       line-height: 1em;
    }
    

Y ya está.

¿Por qué alojar tú tus fuentes pudiendo dejarlas en un servicio cacheado de terceros como Google? Se aducen varias razones, todas ellas opinables y discutibles, excepto una, que es definitiva: las fuentes de Google no cumplen el RGPD / GDPR porque sirven para perfilar a tus usuarios. Ya hay jurisprudencia.

© 2023 X15-15. CC BY-NC-SA 4.0 X-15-15