Jeg har, etter å ha prokrastinert det i et par år, endelig somlet meg til å lage et nytt design til hjemmesiden min og bloggen. Du sitter muligens og ser på resultatet av dette akkurat nå (med mindre du bruker RSS, Planet eller jeg har byttet design igjen).
Det jeg ønsket å oppnå var å videreføre design-elementer fra det forrige designet mitt, som jeg aldri ble helt fornøyd med, samtidig som jeg holdt det hele så enkelt som mulig. Jeg tror jeg har lykkes med det i det store og det hele, men da jeg bestemte meg for å ta i bruk @font-face for å lage headeren min ble ting fort ganske hårete.
Jeg bruker til vanlig Google Chrome, og mesteparten av designarbeidet mitt gjorde jeg med referanse til denne nettleseren, i den tro at alt var flott og fint i de andre nettleserne som følger standarder. Jeg visste jeg ville måtte gjøre noen ekstra-grep for å få IE8 til å oppføre seg, men det er som forventet, og det skal jeg ikke gå inn på her (utover det at det finnes et fint verktøy for å konvertere TTF- og OTF-fonter til de andre rare formatene ulike nettlesere krever hos Font Squirrel, og en grei teknikk for å få flest mulig nettlesere til å fungere er beskrevet her).
Jeg fant nemlig uventet motstand hos ingen ringere enn Firefox. Det har seg sånn at jeg har to domener: haraldseid.net, som jeg bruker for typiske «hjemmeside-ting», altså meget statisk innhold, og slaskete.net, som jeg tidligere delte med Amund og Sverre, til blogg. Begge domenene kjører fra samme server. Jeg utviklet først designet mitt på hjemmesiden, siden det er en meget triviell oppgave med flate HTML-filer osv. Alt var fint og flott. Så skulle jeg arve dette designet til WordPress-bloggen her på slaskete.net, og da ville plutselig ikke den fine fonten i headeren vises i Firefox lenger!
Jeg lette etter feil og bugs og overstyringer fra andre CSS-er, jeg brukte Firebug og jeg prøvde å validere CSS-en (som selvsagt ikke validerer, på grunn av alle de eksperimentelle funksjonene jeg bruker) i ulike validatorer. Til slutt måtte jeg ty til Google, og fant etter hvert ut at:
Firefox nekter vanligvis å vise en webfont (definert med @font-face) fra eksterne URL-er, med mindre denne eksterne webserveren er konfigurert til å tillate det! Grunnen til dette er at man ønsker å begrense «piratkopiering» og uautorisert bruk av webfonter. Nå er det så vidt jeg vet bare Firefox som gjør dette, jeg opplevde i hvert fall ikke problemet med andre nettlesere.
Så hvordan får man Firefox til å akseptere at fonten man linker til er gangbar? Jo, med HTTP-headerne! Her er hvordan du gjør det med Apache:
Først og fremst må du sørge for at mod_headers.so er aktivert, hvordan man gjør dette varierer fra server til server, men under Debian gjorde jeg rett og slett sånn:
a2enmod headers
/etc/init.d/apache2 restart
Med dette på plass så oppretter man en .htaccess-fil i den mappen som fonten ligger, med følgende innhold:
# example Apache .htaccess file to add access control header
<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Mer info og kilde for løsningen er hos Mozilla Hacks.
. Jeg trykket på denne, og fikk opp følgende vindu:
