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):
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:
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):
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.
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.