Google Web Fonts i Internet Explorer 7 och 8

Hur man löser problemet med vikter och stilar i Internet Explorer 7 och 8 när man använder Google Web Fonts.

Tänk att webben äntligen fått fungerande användning av typsnitt. Inte nog med det, utöver ett gäng utmärkta kommersiella tjänster för webbtypsnitt har Google släppt ett antal fria webbtypsnitt samt ett bra verktyg för att testa utseende och kombinationer tills man är nöjd. När man är är klart får en enkel rad att lägga in i HTML-koden på webbsidan och så är det bara att tuta och köra!

Det vill säga, ända tills man kollar hur det ser ut i Internet Explorer.

Detta är ett exempel på en kodrad från Google Web Fonts där jag valt ut två typsnitt och lite olika stilar och vikter:

<link href='http://fonts.googleapis.com/css?family=Puritan:400,700,400italic|Lato:400,700,900,400italic' rel='stylesheet' type='text/css'>

Man lägger in koden på sidan, skapar lite CSS-mallar och sen kan det se såhär fint ut (skärmbild från Firefox):

Google Web Fonts i Firefox

Inte så dumt va? Enligt Google ska Google Web Fonts fungera även med Internet Explorer, men det kan vara värt att kolla en gång. Här är en skärmbild från Internet Explorer 8:

Google Web Fonts IE8 nofix

Aj då. Inte fullt så bra. Låt mig belysa vad som är fel (jämför med den tidigare skärmbilden från Firefox):

Google Web Fonts IE8 nofix with notes

Vad som händer här är att Internet Explorer laddar in typsnitten, men bara i standardformen, dvs ”regular”-varianten av typsnittet. Sen görs falsk fet stil och falsk kursiv stil. Falsk kursiv stil är lätt att se på bokstäver som lilla a och g som ser helt annorlunda ut i äkta kursiv stil.

Problemet med Google Web Fonts i Internet Explorer beror delvis på att Internet Explorer (i version 8 och tidigare) inte laddar typsnitten rätt när det finns flera varianter och delvis på Googles upplägg. Ett lösning som kan hjälpa till en viss del är att ladda Googles CSS separat för varje typsnitt:

<link href='http://fonts.googleapis.com/css?family=Lato:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400italic' rel='stylesheet' type='text/css'>

Detta är dock inte en tillräcklig lösning för det hjälper inte när vi vill ha flera vikter av samma stil (normal, fet, extra fet osv) eftersom Internet Explorer inte hanterar flera vikter av ett och samma typsnitt. Det blir dessutom onödigt många förfrågningar till Google.

Ett bättre sätt är att kopiera Googles @font-face-definitioner direkt in i vår egen CSS. Då kan man nämligen byta namn på typsnitten och komma runt problemet med olika vikter. Här är en skärmbild från Internet Explorer 8 där jag använt mig av denna teknik.

Google Web Fonts IE8 with fix

Och nu fungerar både kursiv och fet stil så som det är tänkt, hurra! Läs vidare för mer info om denna lösning ser ut.

För att kopiera Googles CSS laddar man helt enkelt URL:en i Internet Explorer, till exempel:

http://fonts.googleapis.com/css?family=Lato:900

Som svar från Google får man då:

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
src: url('http://themes.googleusercontent.com/static/fonts/lato/v4/BjDVcwQGWPX2RAidnkd0Bw.eot');
src: local('Lato Black'), local('Lato-Black'), url('http://themes.googleusercontent.com/static/fonts/lato/v4/BVtM30trf7q_jfqYeHfjtA.woff') format('woff');
}

Det är denna kod vi ska använda, men vi ska byta namn på typsnittet. I detta fall byter vi Lato mot LatoBlack:

font-family: 'LatoBlack';

Detta får man göra för varje variant man vill använda i sitt dokument. Kom ihåg att typsnitt tar tid att ladda in, så används så få typsnitt och så få varianter som möjligt på en sida, för att din sida inte ska bli tungladdad för besökarna.

Vi vill inte att varje webbläsare ska läsa in detta dock, utan bara Internet Explorer 8 och tidigare. Därför använder vi ”conditional comments” för att bara ge vår extrakod till rätt webbläsare:

<!--[if lt IE 9]>
Kod enbart för Internet Explorer tidigare än version 9
<![endif]-->

Förutom @font-face-definitionen behöver vi även ange extra CSS för att säga åt IE att använda vårt nya namn på typsnittet:

.test {
font-family: 'LatoBlack', serif;
}

Ett komplett exempel skulle därmed kunna se ut såhär med tre varianter av Lato:

<html>
<head>
<title>Test of Google Web Fonts</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,900,400italic' rel='stylesheet' type='text/css'>
<style>
.test1 {
font-family: 'Lato', serif;
font-weight: 400;
font-size: 36px;
}
.test2 {
font-family: 'Lato', serif;
font-weight: 400;
font-size: 36px;
font-style: italic;
}
.test3 {
font-family: 'Lato', serif;
font-weight: 900;
font-size: 36px;
}
</style>
<!--[if lt IE 9]>
<style>
@font-face {
font-family: 'LatoRegular';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/font?kit=nQhiC-wSiJx0pvEuJl8d8A');
src: local('Lato Regular'), local('Lato-Regular'), url('http://themes.googleusercontent.com/font?kit=9k-RPmcnxYEPm8CNFsH2gg') format('woff');
}
@font-face {
font-family: 'LatoItalic';
font-style: italic;
font-weight: 400;
src: url('http://themes.googleusercontent.com/font?kit=bjaQ6jyWa8A2XFrSKceJyA');
src: local('Lato Italic'), local('Lato-Italic'), url('http://themes.googleusercontent.com/font?kit=oUan5VrEkpzIazlUe5ieaA') format('woff');
}
@font-face {
font-family: 'LatoBlack';
font-style: normal;
font-weight: 900;
src: url('http://themes.googleusercontent.com/font?kit=BjDVcwQGWPX2RAidnkd0Bw');
src: local('Lato Black'), local('Lato-Black'), url('http://themes.googleusercontent.com/font?kit=BVtM30trf7q_jfqYeHfjtA') format('woff');
}
.test1 {
font-family: 'Lato', serif;
}
.test2 {
font-family: 'LatoItalic', serif;
}
.test3 {
font-family: 'LatoBlack', serif;
}
</style>
<![endif]-->
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>

Svårare än så var det inte :) Här finns ovanstående kod som fristående sida.

Jag har testat lösningen i Internet Explorer 7 och 8 och så vitt jag kan se fungerar det bra. Ett tänkbart problem skulle kunna vara att Google ändrar sina @font-face-definitioner som vi nu hårdkodad in på vår sida, det kan vara något man behöver hålla under uppsikt. I moderna webbläsare som Safari, Chrome och Firefox är det inget problem att använda Google Web Fonts.

Den här diskussionen hos Google hjälpte mig på traven för att lösa detta problem som Google själva inte verkar vilja lösa.

Uppgraderad till WordPress 2.7

Jag har precis uppgraderat denna WP-installation till 2.7. Jag var rätt noggrann med alla steg för att få en så fräsch installation som möjligt.

Sen redde jag en gång för alla upp den soppa som skapades av att WP en gång i tiden använde ISO Latin 1 som teckenkodning och det som låg i databasen var en slags specialfelkodad historia som fungerade, men krävde lite hack. Jag fick helt enkelt söka för hand igenom en export av databasen på jakt efter alla udda tecken (åäöÅÄÖéèáàüÉÈÁÀ osv) och ersätta dom med de rätta. Samt ställa in alla fält i alla databastabeller att använda UTF-8. Så nu har jag förhoppningvis lämnat teckenkodningshelvetet bakom mig och kommit till det förlovade landet av enbart UTF-8 när det gäller denna sida.

Nästa steg blir att jämföra temat här (som är en egen översättning av WordPress gamla default-tema) med det senaste default-temat så jag drar nytta av de senaste tema-relaterade funktionerna (främst kommentarer har fått lite nya finesser i 2.7).

WordPress-folket har förövrigt gjort ett otroligt bra jobb de senaste året med att ta WP till en ny nivå och 2.7 är en riktig milstolpe. Jag jobbar mycket med Drupal i mitt dagliga jobb och det är inte utan att man ibland man önskar att Drupal hade tagit samma elefantkliv mot användarvänlighet som WordPress gjort senaste åren.

Drupal är fortfarande bättre för mer avancerade sajter, men WordPress är mycket mera behagligt att använda för enklare sajter. Bara att applådera och hoppas att Drupals core-utvecklare slutar med sitt löjliga ”Drupal is not WordPress” och istället inspireras och kopierar det som WordPress-folket gjort bra med WordPress.

Popup visar faran med obevakad gästbok

Förra hösten anordnade Umeå Open en mycket trevlig endagsfestival vid namn Popup. Lisa Miskovsky och Khoma var två av artisterna och det var grymma spelningar. Det sägs att festivalen även blir av i höst med bland annat Sahara Hotnights på scen. Men hemsidan visar dock ingen information om ny festival ännu.

Vad Popups hemsida däremot har – och vad som detta egentligen handlar om – är en gästbok som de ansvariga glömt bort.

Gästboken innehåller just nu när detta skrivs 7653 inlägg. Det vore en bra siffra om det inte vore för att endast 24 inlägg är riktiga inlägg, de resterande 7629 inläggen är spamkommentarer!

Fortsätt läsa ”Popup visar faran med obevakad gästbok”

Ny version – tillfälligt utseende

Jag har uppdaterat WordPress från den uråldriga 1.2 som drev Aetles fram till den senaste versionen, 2.0 (2.0.1 är visst pågång snart, men den verkar fungera så jag kör med 2.0 tills vidare). Jag har dock inte gjort ett tema av Aetles gamla utseende. Därför kör jag på det förvalda temat som finns i WP (dock den svenska varianten) tills jag gjort detta. Därför ser det så annorlunda ut här jämfört med hur det brukar se ut.

WP 1.2 har fungerat bara fint för mig faktiskt, men på sistone har jag börjat få så mycket kommentarsspam. Visserligen kom det nästan aldrig ut på sidan, men jag fick massa mejl (ett för varje spam) och det började bli tröttsamt. Sedan tidigare har jag kört WP 1.5 på bröllopssajten och det har fungerat bara fint det med.

Förbättring av ”Fade Anything Technique”

Jag har använt mig av en javascript-teknik på vår bröllopshemsida för att få en lite flashig effekt på länkarna i menyn. Tekniken är en egen vidareutveckling av Richard Livseys variant av Adam Michelas ”Fade Anything Technique” (en länk som inte verkar fungera längre, tyvärr). Tekniken, som förkortas FAT, är i sin tur inspirerad av 37 Signals ”Yellow Fade Technique”.

Min variant av FAT har fungerat utmärkt i webbläsare som Firefox och Internet Explorer 6. I Safari har den fungerat, men bara delvis, och det har stört mig. Men nu har jag äntligen löst detta problem!
Fortsätt läsa ”Förbättring av ”Fade Anything Technique””