El peso final de las fuentes son bastante molestas cuando empezamos a acumular. Os voy a explicar mi truco personal para reducir el tamaño total haciendo que Google Fonts solo funcione con los caracteres del castellano.
Al enlazar una tipografía de Google Fonts nos da 2 elementos a colocar en nuestra web. Si yo me decido por usar Montserrat, por ejemplo, con su negrita y cursiva nos generará un HTML que debemos situar en el <head>.
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700&display=swap" rel="stylesheet">
Y el nombre del font-family para aplicar en nuestros estilos.
font-family: 'Montserrat', sans-serif;
Y con estos sencillos pasos ya estaría la fuente aplicada a nuestra web. Pero… si prestas la atención en el peso hablamos de 5,71KB. Tal vez no te parezca mucho, pero va a estar presente en todas tus páginas. Y solo tenemos 1, ¿y si debemos incluir 4 o 5 extra? Este problema se debe en gran parte por la riqueza de idiomas y caracteres que viene incluido. ¿Se puede optimizar? ¿Podemos dejar solo lo que nos interesa descartando inútiles Mb de transferencia?
Google Fonts nos permite filtrar los caracteres que queremos usando el parámetro &text=. Si yo solo fuera a mostrar la palabra navegador, cambiaría la ruta de mi link indicando que letras voy a usar.
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700&display=swap&text=navegdor" rel="stylesheet">
No he escrito mal la palabra navegador, se quita la segunda a ya que la he indicado después de la n. Pasamos ahora a solo 0,889Kb.
Ahora si yo aplicara todas las letras del abecedario español con sus símbolos de puntuación más utilizados deberíamos añadir: minúsculas, mayúsculas, acentos y otros caracteres importantes.
&text=abcdefghijklmnñopqrstuvwzáéíóú1234567890ABCDEFGHIJKLMNÑOPQRSTUVWZÁÉÍÓÚ?¿!¡@.,:;%
Quedando para terminar la ruta para el idioma de Cervantes.
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700&display=swap&text=abcdefghijklmnñopqrstuvwzáéíóú1234567890ABCDEFGHIJKLMNÑOPQRSTUVWZÁÉÍÓÚ?¿!¡@.,:;%" rel="stylesheet">
Hemos pasado de 5,71Kb a un extraordinario 1,1Kb. ¡Hemos optimizado casi 5 veces su peso!
{{ comments.length }} comentarios