Som tur så finns det en hyffsad lösning på båda problemen. Google web fonts erbjuder nästan 200 typsnitt som vem som helst får använda fritt, och som dessutom fungerar i de flesta webbläsarna:
- Chrome 4.249.4+
- Firefox 3.5+
- Safari 3.1+
- Opera 10.5+
- Internet Explorer 6+
Det fungerar dessutom fint i de modernare mobiloperativsystemen som iOS 4.2+ och Android 2.2+.
Hur gör man?
- Surfa in på Google web fonts och leta reda på ett typsnitt du vill använda.
- Klicka sedan på “Quick-use” till höger under förhandsvisningen.
- Skrolla ned lite och klipp ut koden från ruta “3. Add this code to your website” och klistra in den högst upp mellan taggarna <head> och </head> i koden för din sajt.
Exempel:<link href='http://fonts.googleapis.com/css?family=Loved+by+the+ King&v2' rel='stylesheet' type='text/css'>
- Sedan är du färdig att använda typsnittet i din css-kod.
Exempel:h1 { font-family: 'Loved by the King'; }Så, nu är det fritt fram för nya typsnittet
Att tänka på
- Använd inte för många typsnitt. När en besökare kommer till din sida laddas typsnittet ned och används utan att användaren behöver gör något. Det lagras i cache-minnet för webbläsaren, så nästa gång behöver inte nedladdningen ske. Alla typsnitt är komprimerade och nedladdningen går så fort att besökare i de allra flesta fall inte märker något. Men du bör ändå tänka på att inte använda för många typsnitt på samma sida för att undvika sämre laddningstider av din sajt (i de flesta fall är det dessutom inte speciellt snyggt med många olika typsnitt ;-)).
- Ange alternativa typsnitt. Även om Google web fonts har stöd för de flesta webbläsare så bör du alltid aktivt ange alternativa typsnitt som visas om besökaren använder en icke-kompatibel webbläsare.
Exempel:font-family: 'Loved by the King', Arial, Verdana;
Ett bättre alternativ är enligt mig att använda @font-face. Fördelen är att man sparar http-request, kan använda egna fonter (som man får använda) och det fungerar princip med alla webbläsare idag inklusive Internet Explorer 4 (Ja, du läste rätt).
Enklaste sättet att komma igång med font-face är att besöka http://www.fontsquirrel.com/ och välja ett eller flera av de över 600 fonter som finns på sidan. Sedan kan man få allt i ett smart litet med fonter, html-kod, css-kod och exempel. Alla fonter på sidan får användas gratis även för kommersiell bruk. Har man egna fonter kan man använda deras verktyg ”@font-face generator” för att konverterar så att det fungerar med font-face.
Jag testade metoden på h1:orna på min egna sajt. Tack för ett bra tips.
Bra tips och positivt att detta händer. Det bästa vore såklart om Loopia förinstallerade alla dessa typsnitt så vi kunder bara kan tuta och köra. Jag är t ex osäker på om typsnitten på Loopia-reggade Copywriter.se verkligen syns som de ska. Finns det någon testtjänst där man kan se hur sin sajt ser ut i olika webbläsarversioner?
Hej Kim, det finns gott om sådana tjänster (Googla på ”check site browsers” t ex). Tyvärr är min erfarenhet att de inte fungerar så bra. För att kunna göra riktigt bra kontroller kan du installera flera versioner av webbläsarna på olika virtuella datorer med t ex Virtual Box (https://www.virtualbox.org/). För att installerar flera versioner av Internet Explorer kan du även använda IEcollection (http://utilu.com/IECollection/), jag rekommenderar dock att du installerar även det på en virtuell dator.
Använder du någon statistiktjänst kan det vara bra att kolla vilka webbläsarna dina besökare använder, på så sätt kan du prioritera vilka du ska fokusera mest på att testa din sajt i.