/* * assets/css/fuentes.css — Instrument Sans AUTOALOJADA (L4). * * Fichero PROPIO del kit. Sustituye al `@import` de Google Fonts que traía * `assets/scss/globals.scss` en su primera línea y que acababa compilado en * `dist/output-scss.css`. * * POR QUÉ NO SE CARGA DESDE GOOGLE FONTS * -------------------------------------- * 1) RGPD. Google Fonts sirve los ficheros desde servidores de Google, así que * cada visitante de la tienda hacía una petición a fonts.googleapis.com y a * fonts.gstatic.com, y en esa petición viaja su dirección IP. En una tienda * española eso es una comunicación de datos personales a un tercero fuera * del EEE sin base legal ni consentimiento; hay resoluciones europeas en ese * sentido (la más citada, la del Landgericht München de enero de 2022). * Autoalojar la fuente elimina la transferencia de raíz: no hay que * informarla, ni pedir consentimiento, ni añadirla al registro de * tratamientos, porque deja de existir. * 2) M7. El kit ya tiene abierto el trabajo de retirar dependencias de CDN * externos. No se añade una más mientras se está cerrando esa. * 3) Sin internet no hay tipografía. El kit tiene que poder servirse en una * intranet, en una demo sin salida a la red o en un servidor con el tráfico * saliente cortado, y con el @import la web perdía su tipografía y caía al * sans-serif del sistema. * * Además, un `@import` dentro de un CSS es la peor forma posible de cargar una * fuente: el navegador no descubre la hoja de Google hasta que ha descargado y * parseado `output-scss.css`, así que la petición de la fuente va en tercera * fila. Con los ficheros en casa y la precarga de `components/header.php`, el * navegador empieza a bajarlos en cuanto lee el . * * QUÉ SE HA COPIADO, Y POR QUÉ ASÍ * -------------------------------- * Lo que sirve Google hoy, exactamente: se descargó su hoja con un User-Agent * de Chrome y se replicaron sus OCHO bloques @font-face — cuatro pesos (400, * 500, 600 y 700) por dos subconjuntos (latin y latin-ext), estilo normal, sin * itálicas — con los MISMOS `unicode-range` copiados literalmente de su * respuesta. No es una aproximación: servir menos pesos cambiaría el grosor de * algún texto y no nos daríamos cuenta hasta verlo en la tienda del cliente. * * Los cuatro pesos se usan de verdad: 400, 500 y 600 los fija el SCSS del skin * y 400, 500, 600 y 700 aparecen como utilidades de Tailwind en el marcado * (font-normal, font-medium, font-semibold y font-bold). * * SON DOS FICHEROS PARA OCHO BLOQUES, Y NO ES UN ERROR: Instrument Sans es una * fuente VARIABLE con un eje `wght` de 400 a 700, así que un único fichero por * subconjunto contiene todos los pesos y el navegador interpola. Google hace * exactamente esto mismo; sus ocho bloques apuntan a dos URLs. * * El troceado por `unicode-range` se conserva tal cual: el navegador descarga * `latin-ext` (11 KB) SOLO si la página usa algún carácter de ese rango. Una * tienda en castellano normalmente no lo hace —comprobado carácter a carácter * que todo el castellano (áéíóú, ñÑ, üÜ, ¿¡, «», º ª y el euro) vive en el * subconjunto `latin`— así que en la práctica se bajan 30 KB, no 41 KB. * * `font-display: swap` es el que traía Google: el texto se pinta desde el * primer momento con la fuente de respaldo y se recompone al llegar la buena, * en lugar de dejar un hueco en blanco. * * LICENCIA * -------- * Instrument Sans se distribuye bajo SIL Open Font License 1.1. Verificado por * dos vías: el propio binario lo declara en su tabla `name` (id 14 = * https://scripts.sil.org/OFL) y el repositorio oficial de Google Fonts trae el * texto de la licencia, que se incluye en `assets/fonts/OFL.txt` como exige la * propia OFL al redistribuir. Copyright 2022 The Instrument Sans Project * Authors. * * Las rutas son RELATIVAS a este fichero (`../fonts/…`), no absolutas, para que * el kit funcione igual colgando del raíz del dominio que de una subcarpeta. */ /* latin-ext */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }