/* ========================================================================= Escultoriam — tipografía Las dos familias se sirven desde el propio sitio, no desde Google Fonts. El motivo es un bug medido, no una preferencia: con la hoja de Google la tipografía llegaba tarde —DNS y TLS a dos dominios ajenos, la hoja, y solo entonces los ficheros— y el texto se recomponía cuando ya se estaba usando la página. En escritorio no se nota, porque cada sección mide una pantalla y su alto no depende del texto; en móvil sí: ahí el contenido va apilado y cada sección mide lo que mide su texto. Al saltar desde el menú con la página recién cargada, el destino se movía bajo el salto hasta 307 px y se aterrizaba a media sección. Se ataca por los dos lados: 1. los ficheros son del propio sitio y los dos críticos van en `preload` desde el ``, así que salen a la vez que el HTML y llegan casi siempre antes del primer pintado, 2. mientras no llegan, se compone con un RESPALDO CALIBRADO: la fuente del sistema reescalada con `size-adjust` y con las métricas de la nuestra, de modo que ocupa el mismo sitio. Cuando la real entra, el texto cambia de forma pero no de alto: la sección no se mueve y el salto aterriza donde debe. Medidas tomadas en Chromium a 1000 px sobre la misma cadena —ancho, alto sobre la línea base y profundidad bajo ella—: Cardo 400 11892 990 364 Grenze 600 10850 1100 380 Palatino Linotype 12705 Noto Serif (Android) 13686 Times New Roman 11525 `size-adjust` es el cociente de anchos; las alturas se dividen entre él para que sobrevivan al reescalado. Estos números salen de medir, no de afinar a ojo: para cambiarlos hay que volver a medir. Los ficheros son los subconjuntos latin y latin-ext de Google Fonts, con sus mismos `unicode-range`: el navegador solo descarga el segundo si la página usa algún carácter que lo necesite. Ambas familias son OFL. ========================================================================= */ /* ------------------------------------------------------------------ Cardo Cuerpo de lectura: 400, 700 y la cursiva de 400. */ @font-face { font-family: "Cardo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/cardo-400-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; } @font-face { font-family: "Cardo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/cardo-400-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; } @font-face { font-family: "Cardo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/cardo-700-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; } @font-face { font-family: "Cardo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/cardo-700-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; } @font-face { font-family: "Cardo"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/cardo-400-italic-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; } @font-face { font-family: "Cardo"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/cardo-400-italic-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; } /* ----------------------------------------------------------------- Grenze Titulares. El fichero recto es variable en el eje de peso, así que uno solo cubre el 500, el 600 y el 700 que usa la página. La cursiva es estática y solo existe en 500, que es donde se usa: el subtítulo del hero. */ @font-face { font-family: "Grenze"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/grenze-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; } @font-face { font-family: "Grenze"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/grenze-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; } @font-face { font-family: "Grenze"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/grenze-italic-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; } @font-face { font-family: "Grenze"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/grenze-italic-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; } /* --------------------------------------------------- respaldos calibrados Tres familias por fuente, una por cada tipografía de sistema que se va a encontrar de verdad: Palatino en Windows, macOS e iOS; Noto Serif en Android; Times donde no haya ninguna de las dos. Cada una lleva su propio `size-adjust` porque sus anchos no se parecen entre sí —del 87 % al 103 % del nuestro—, así que un solo número no serviría para las tres. No están para verse bien: están para ocupar exactamente el alto de la fuente real mientras esta llega. `line-gap-override: 0%` es el de nuestras dos familias, que no llevan interlínea propia. Donde el navegador no entienda estas descripciones —Safari anterior a 16.4— el respaldo se usa sin calibrar, que es como se comportaba antes. */ @font-face { font-family: "Cardo respaldo"; src: local("Palatino Linotype"), local("Palatino"), local("Iowan Old Style"), local("Book Antiqua"); size-adjust: 93.6%; ascent-override: 105.8%; descent-override: 38.9%; line-gap-override: 0%; } @font-face { font-family: "Cardo respaldo Android"; src: local("Noto Serif"), local("Droid Serif"); size-adjust: 86.9%; ascent-override: 113.9%; descent-override: 41.9%; line-gap-override: 0%; } @font-face { font-family: "Cardo respaldo Times"; src: local("Times New Roman"), local("Times"); size-adjust: 103.2%; ascent-override: 95.9%; descent-override: 35.3%; line-gap-override: 0%; } @font-face { font-family: "Grenze respaldo"; src: local("Palatino Linotype"), local("Palatino"), local("Iowan Old Style"), local("Book Antiqua"); size-adjust: 85.4%; ascent-override: 128.8%; descent-override: 44.5%; line-gap-override: 0%; } @font-face { font-family: "Grenze respaldo Android"; src: local("Noto Serif"), local("Droid Serif"); size-adjust: 79.3%; ascent-override: 138.7%; descent-override: 47.9%; line-gap-override: 0%; } @font-face { font-family: "Grenze respaldo Times"; src: local("Times New Roman"), local("Times"); size-adjust: 94.1%; ascent-override: 116.9%; descent-override: 40.4%; line-gap-override: 0%; }