@font-face… cinc anys després…

Això és una anotació personal per recordar-me’n després... ;-)

Feia molt de temps que hi anava darrera. Sabia que es podia incrustar pràcticament qualsevol tipografia en web però, per més que havia buscat no havia trobat la solució… o almenys una solució asequible als meus coneixements del moment. Coneixia de l’existència de les Google Fonts, però per més que havia rebuscat no m’acabava de convèncer: igualment t’havies de “conformar” amb les que Google t’oferia… és clar que eren lliures de drets però no em permetia posar qualsevol tipografia. Ara ho he tornat a provar… i a la primera! I mira que m’hi havia barallat!

De fet, ara que ja sé com funciona, és molt senzill. Primer de tot cal conèixer els diferents formats de tipografies i perquè serveixen cadascun. Perquè es vegin bé en web en qualsevol navegador –fins i tot en aquells engendres tipus Explorer 6–, i fins que això s’acabi de “normalitzar”, nececessitem la tipografia en quatre formats diferents:

• OTF (Open Type Font) o TTF (True Type Font), indistintament: o bé una o bé l’altra;
  Amb això estaria solucionat, però ara venen els “parxes”… per veure-ho amb altres navegadors més antics o molt “senyoritus”, que volen estar per sobre de la resta escrivint les seves pròpies regles…:
• EOT (Embedded Open Type) (coses de Microsoft…) visible des d’IE4.
• SVG (Scalable Vector Grafics), un format més universal… Opera, Safari, iPhone i Pad ho veuran.
• WOFF (Web Open Font Format) per Firefox i Opera

Doncs tenint la tipografia OTF o TTF, el més pràctic és entrar al WebFont Generator de FontSquirrell i que et converteixi la font als altres 3 formats. A més et prepara la fulla d’estil (CSS) o les línes de codi necessàries per insertar l’atribut @font-face a la teva fulla d’estil personal. Més fàcil impossible! I el més important: funciona!

Només he necessitat 5 anys per trobar la solució! ;-)

Si algú vol saber com funciona exactament aquí pot trobar una mica més d’informació (només fa 4 anys que està escrita…). La primera pista l’he trobada aquí i fa 5 anys que ja funcionava…