Tipografía personalizada en páxina web

cómo facer que a túa web utilice un tipo de letra personalizado

Documentando o cambio de tipo de letra utilizado neste blog

Anteriormente

aspecto inicial con Merriweather e Inconsolata

Estas tres tipografías estaban incrustadas no código do blog a través dunha ligazón a web de google

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />

cada vez que alguén visita o meu blog (!), éste realiza unha petición ao servidor de google para que sirva o tipo de letra indicado. Ao realizar esta petición google obtén información acerca das persoas que me visitan, é dicir, estou dando datos teus a google.

Qué datos?

Google e outras empresas, colocan de xeito máis ou menos público código na gran maioría de páxinas web que visitamos. É un acordo comercial entre as empresas que se dedican a comerciar cos nosos datos (e vailles ben, se nos fixamos na capitalización bursátil) e quen publica a web. É o xeito máis productivo de extraer información.

Pero hai xeitos máis discretos e transparentes, normalmente por ignorancia de quen os utiliza como poden ser os malditos reCaptcha e ferramentas gratuítas como poden ser os repositorios variados que empresas poñen a nosa disposición. Por exemplo: as tipografías de google ou os sitios de aloxamento de imaxes (as de este artigo non están ahí).

De xeito xenérico, envíase:

  • a túa IP (o teu enderezo en internet, que o teu provedor de internet pode ligar a túa localización física e, se quere, venderlle esta información a google)
  • identificadores do teu navegador (tipo, plataforma, engadidos, ...)
  • cantas veces e con qué frecuencia visitas a miña web
  • a qué horas e desde qué dispositivos
  • etc.

google ou calquera outra empresa ten os métodos para engadir esta pouca información (aparentemente) a súa base de datos onde nos teñen fichados, e cómo teóricamente podemos reducir esa cantidade de datos.

É dicir, fago esto por respeto hacia ti.

Cambiando a fonte

pero esto non vai de surveillance capitalism, vai do cambio de tipo de letra que utilizo no blog.

Alegreya

Pois si, Alegreya, a do kindle. Utilízoa para os textos dos artigos e menús.

Alegreya Sans

Para títulares, ligazóns a metadatos, etiquetas, etc.

Consola Mono

Consola Mono para texto sen formato e código.

Alegreya e Consola

Procedemento

esto é válido para calquera web, pero deixoo cómo referencia para min.

  • obter a fonte no formato(s) que estimes. Normalmente otf, ttf, woff, woff2 e mételos nunha carpeta accesible polo servidor. Son ficheiros pequenos.
  • na folla de estilos .css da web engades a ligazón a fonte
@font-face {
    font-family: 'AlegreyaSans';
    src: url('https://oteusitio.web/ruta/a/ficheiro_fonte_alegreya_sans.woff2') format('woff2'),
         url('https://oteusitio.web/ruta/a/ficheiro_fonte_alegreya_sans.woff') format('woff');
         url('https://oteusitio.web/ruta/a/ficheiro_fonte_alegreya_sans.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    

}

engadindo algunha outra característica que creas oportuna (e soporte o estándar).

  • na páxina onde queiras utilizar esa letra engades a ligazón a folla de estilos no header
<link rel="stylesheet" type="text/css" href="https://oteusitio.web/ruta/a/estilo.css" />
  • se só a queres utilizar para un determinado elemento da páxina (por exemplo os títulos) indícalo na folla de estilos
h1, h2, h3,
h4, h5, h6 {
    [...outras características...]
    font-family: "AlegreyaSans", sans-serif;
}

Outras tipografías

Probei tamén con Munson e Ysabeau, pero non me gustaba o espazo entre letras e os títulos quedaban demasiado remarcados en pantallas con pouca resolución.

Munso e Ysabeau

Que digo eu que igual che parecen todas a mesma e que tanto traballo pa'qué!? :p , pois por exemplo para gastar unha mañán da corentena polo covid-19.


CC BY-SA