Zoekt u naar een veilige methode om speciale fonts te gebruiken op uw website? Met Google Fonts heeft u de beschikking over honderden lettertypen. De installatie is bijzonder eenvoudig.

Er bestonden al diverse methoden om uw website op te pimpen met afwijkende lettertypen. Voor elke methode geldt dat Internet Explorer anders omgaat met text-rendering dan andere browsers. Controleer daarom altijd het resultaat.

Bestaande methoden:

sIFR (Scalable Inman Flash Replacement)
De SIFR methode gebruikt Flash om de tekst – letter voor letter – te vervangen en om te zetten in het juiste font. Voordelen: U kunt ieder lettertype gebruiken dat u bezit. Nadelen: De werking is ingewikkeld en traag. Daarnaast wordt Flash niet ondersteund op iPhone en iPad.

TypeKit
Na het aanmaken van een account kunt u kiezen uit honderden fonts die op typekit.com worden gehost. Voordelen: Het gebruik is vrij eenvoudig. Nadelen: Wilt u meer dan twee fonts gebruiken dan moet u een betaald account aanschaffen. Daarnaast is TypeKit niet volledig compatible met Internet Explorer.

@font-face
Deze methode maakt het mogelijk om zelf font-kits te hosten die u gratis kunt downloaden via fontsquirrel.com. Er zijn momenteel 690 fonts beschikbaar. Voordelen: Het gebruik is vrij eenvoudig en de methode is compatible met Internet Explorer. Nadelen: Wij hebben nog geen nadelen kunnen ontdekken.

Nieuw: Google Fonts!

Sinds enige tijd biedt Google Fonts momenteel 214 hosted fonts waarvan u gratis gebruik kunt maken. Voordelen: Download is niet nodig en de methode is simpel te integreren en compatible met Internet Explorer. Nadelen: De fonts worden gehost door Google. (Is dat eigenlijk wel een nadeel?)

 

Wij hebben uitgebreid geëxperimenteerd met deze nieuwe dienst en we zijn enthousiast! Het gebruik van deze methode is bijzonder eenvoudig en levert uitstekende resultaten over de diverse systemen en browsers.

 

Hoe het werkt:

Stap 1: Op de website van Google Fonts (google.com/webfonts) kunt u de beschikbare lettertypen bekijken en toevoegen aan uw mandje (Collection).

Stap 2: Vervolgens kunt u de zien hoe de lettertypen zich gedragen in verschillende stijlen en grootten.

Stap 3: Op de derde en laatste pagina krijgt u de link naar de Google-stylesheet die u in de header van uw website moet plakken. Indien gewenst kunt u ook kiezen voor een @import- of javascript-code. 

Stap 4: Klaar is Kees! Vanaf nu kunt u het lettertype als font-family gebruiken in uw eigen stylesheet.

Page Speed

Het aantal gebruikte fonts is van invloed op de snelheid van uw website Bij stap 3 van Google Fonts krijgt u een pagespeed indicator te zien: zorg dat u in het groene gebied blijft!

 

Links:

www.google.com/webfonts

www.fontsquirrel.com

www.typekit.com

 

Studio Plankton | Webdesignbureau Rotterdam
Internetspecialist in ontwerp, ontwikkeling en e-marketing voor al uw webprojecten. Telefoon: 010-226 54 12 / E-mail: info@studioplankton.nl