Dudas con las fuentes en el blog y la web: marcar la font-family o cargar algún tipo concreto en local

El 11 de septiembre escribí un post sobre un posible nuevo estilo para el blog tipo monospace. Justo estos días he visto a algunos contactos del Fediverso hablar de fuentes por Mastodon. Concretamente, vi a Adrián Perales hablar de Linux Libertine y en el hilo de otro de sus toots se mencionaban la Atkinson Hyperlegible, Fira Code, Martian Mono, Unifont, etc. Descargué todas y he ido probando.

Me ha encantado la Atkinson Hyperlegible y la he puesto en mis materiales de clase. Este año repito asignaturas del año pasado. Tengo la base de todo ya hecha y voy añadiendo actualizaciones. En LibreOffice he descubierto la opción de Tools / Options / LibreOffice / Fonts / Replacement table. Con esta opción puedes sustituir una letra por otra para siempre y en todos los documentos. He marcado la opción de sustituir siempre la Liberation Serif que tenía por la Atkinson Hyperlegible. Es más directo así que ir sustituyendo los estilos de los párrafos. También puse por defecto la Atkinson en Tools / Options / LibreOffice Writter / Basic Fonts para Default, Heading, List, Caption e Index, pero tenía que cambiarla en otros estilos de párrafo como contents, etc. En definitiva, con lo primero ya veo la todo con Atkinson y al exportar en pdf sale con Atkinson todo.

Tanto me ha gustado que he puesto la Atkinson en la web y también en el blog. En este también he usado para algunos elementos la letra monospace JetBrains Mono. Probé la Fira Code y muchas otras. Me gustó mucho la Cascadia, pero me he quedado con JetBrains Mono.

De momento he abierto una carpeta en el blog con el nombre de Fonts y ahí he puesto la Atkinos Regular, Bold y Cursiva, y la JetBrains Mono Regular. Para cargarlas en el CSS, he matizado esto (pongo solo un caso para no alargarlo):

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('ruta/a/la/carpeta/donde/está/la/Atkinson-Hyperlegible-Regular-102.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Y ya en lo que es el root de mi css especifico:

:root {
    --font-main: 'Atkinson Hyperlegible', sans-serif;
    --font-secondary: 'JetBrains Mono', monospace;
}

He tenido dudas sobre si cargar estas fuentes en el CSS o simplemente matizarlas como preferencia para que carguen en los navegadores allí donde están instaladas, y si no que lo hagan las que cada persona tenga por defecto en sans-serif y monospace. Probé el tamaño en Pingdom Website Speed Test y sin cargar las fuentes de Atkinson y JetBrains Mono el tamaño de la web se me queda en 16kb. Cargándolas, sube a 231'3kb. No obstante, consigo un Performance Grade de 99 (A). Así que no supone demasiado problema.

He dudado también porque tengo la sensación de que poca gente configura las letras por defecto en sus navegadores. De esto no tengo datos y la sensación viene porque yo nunca lo había hecho hasta hace poco. Es totalmente una sensación subjetiva. En Firefox se puede incluso matizar no cargar fuentes de las webs y funcionar siempre con las que se definan según criterios personales para las familias serif, sans-serif y monospace. Eso está muy bien. Pero cargando fuentes en local garantizas homogeneidad en tamaños y estilo.

Por el momento, voy a dejar las fuentes Atkinson Hyperlegible y JetBrains Mono en el blog y la primera en la web.

Fin: post publicado el 20 septiembre de 2024 por Pedro Lázaro Rodríguez; con licencia Creative Commons CC BY-NC-SA 4.0 y sobre el tema o temas: Software Libre

Volver al top de la página