/* =========================================================================
   TIPOGRAFIAS DE RaD.Ar

   Todo lo que el sitio necesita para verse como se tiene que ver esta en esta
   carpeta. No se le pide nada a ningun servidor ajeno.
   =========================================================================

   Este archivo es el UNICO lugar del proyecto que dice de donde salen las
   tipografias. Lo cargan las dos partes del sitio:

     - el tema, desde functions.php
     - el tablero, desde graficos/salario-en-datos.html

   Antes cada uno se las pedia a Google por su cuenta, con dos direcciones
   distintas y largas, y cambiar de idea significaba editar dos archivos y
   acordarse de los dos.

   -------------------------------------------------------------------------
   POR QUE SACARLAS DE GOOGLE
   -------------------------------------------------------------------------

     - El sitio se dibuja igual sin conexion. Antes, sin internet, los titulos
       salian en Georgia y el texto en Arial.
     - Nadie mas se entera de quien entra al sitio. Cada visita le avisaba a
       Google, sin que la persona lo eligiera. Para un sitio de una organizacion
       que publica datos, eso importa.
     - El sitio no cambia solo. Si Google actualiza la tipografia o cambia una
       direccion, aca no pasa nada.

   -------------------------------------------------------------------------
   DOS ARCHIVOS POR FAMILIA, NO VEINTE
   -------------------------------------------------------------------------

   Google ofrece las dos formas: una veintena de archivos estaticos, uno por
   cada peso y cursiva, o dos archivos VARIABLES que contienen todos los pesos
   en un solo tipo de letra dibujado de forma continua.

   Se usan los variables por dos razones:

     - Pesan 1,2 MB las dos familias juntas, contra 6,8 MB de la descarga
       completa.

   -------------------------------------------------------------------------
   Y ADEMAS EN WOFF2, QUE ES LO QUE BAJA EL VISITANTE
   -------------------------------------------------------------------------

   Cada @font-face pide primero el .woff2 y deja el .ttf como respaldo. El
   navegador baja el PRIMER formato que entiende, y woff2 lo entienden todos los
   navegadores de los ultimos diez anios, asi que en la practica el .ttf no se
   descarga nunca: queda para un navegador viejisimo y para el archivo.

   La diferencia no es chica. Las mismas cuatro familias:

       .ttf     1.167 KB
       .woff2     457 KB      un 61 % menos

   Y lo que baja de verdad una primera visita a la portada son tres de las
   cuatro —Raleway normal, Raleway cursiva y Playfair normal; la cursiva de
   Playfair no la usa ninguna regla del sitio—: 894 KB en .ttf contra 356 KB en
   .woff2. Es, por lejos, lo mas pesado que descarga una visita: mas que el CSS,
   mas que Chart.js y mas que todos los datos de los tres tableros juntos.

   Los .woff2 se generaron desde los mismos .ttf con fontTools, sin recortar
   caracteres ni pesos: es el mismo tipo de letra comprimido mejor.
     - El CSS del sitio pide los pesos 300, 500, 600, 700 y 800. Con archivos
       estaticos habria que declarar un bloque por peso y acordarse de agregar
       uno cada vez que alguien use un peso nuevo. Con el variable,
       "font-weight: 100 900" cubre cualquiera que se pida hoy o dentro de dos
       anios.

   Las carpetas static/ que venian en las descargas se borraron: eran los mismos
   pesos duplicados, sin usar.

   font-display: swap hace que el texto se vea de entrada con la tipografia de
   respaldo y cambie cuando la buena termine de cargar, en lugar de dejar la
   pagina en blanco mientras espera. Con los archivos en el propio servidor la
   espera es minima, pero la regla no cuesta nada y protege la primera visita.

   -------------------------------------------------------------------------
   LAS LICENCIAS NO SE BORRAN
   -------------------------------------------------------------------------

   OFL-Raleway.txt y OFL-Playfair-Display.txt son la SIL Open Font License.
   Permite usar y redistribuir estas tipografias, incluso en un sitio publico,
   con una condicion: que el texto de la licencia viaje con los archivos.
   Publicar los .ttf sin esos dos archivos al lado seria incumplirla.
   ========================================================================= */


/* -------------------------------------------------------------------------
   RALEWAY — el texto de todo el sitio.
   Rango de pesos del archivo variable: 100 a 900.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Raleway';
  src: url('Raleway-VariableFont_wght.woff2') format('woff2'),
       url('Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('Raleway-Italic-VariableFont_wght.woff2') format('woff2'),
       url('Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* -------------------------------------------------------------------------
   PLAYFAIR DISPLAY — los titulos. Es --fuente-titulo en style.css y la familia
   "playfair" en theme.json.

   Rango de pesos del archivo variable: 400 a 900. Empieza en 400 y no en 100:
   esta familia no tiene pesos livianos. El CSS del sitio le pide 700, 800 y
   900, asi que entran todos.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  src: url('PlayfairDisplay-VariableFont_wght.woff2') format('woff2'),
       url('PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2'),
       url('PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}