VisionEars wordt Mulberries Agency

Wij gaan vanaf 1 september verder onder de naam Mulberries Agency. Naast de vertrouwde service die je van ons gewend bent hebben we ons ook gespecialiseerd op het gebied van Marketing Automation en Experiment Marketing.

Bekijk hier de website van Mulberries Agency Sluit popup

Download je gratis ebook: Marketing automation - 6 systemen vergeleken

Zoek je naar software om meer leads te converteren? Download onze gratis ebook waarin wij de 6 meest gebruikte softwarepakketten met elkaar vergelijken!

Download je gratis ebook: Infograpic stappenplan

Voor een geslaagde infographic heb je meer nodig dan goede data en een mooi design. Het moet een verhaal vertellen dat aansluit bij de doelgroep. Download ons heldere stappenplan en ga voor die perfecte infographic.

Download je gratis ebook: 10 tips voor een optimale webshop homepagina

De homepagina van je webshop is enorm belangrijk, want het is de first impression die telt. Een geoptimaliseerde homepagina is belangrijk voor het succes van je webshop.

Gratis consult: snelheidsoptimalisatie

Een snelle(re) website draagt bij aan de gebruikerservaring en levert meer conversies en dus omzet op. Wij helpen je graag op weg!

Wie onderstaand formulier invult, ontvangt een uitnodiging van een gratis consult. Tijdens dit gesprek bekijken we de betreffende website(s) en bespreken we samen alle mogelijkheden en valkuilen.

Gratis consult: Webshop optimalisatie

Voor een geslaagde webshop heb je meer nodig dan mooi design. Een goede gebruikerservaring, technisch in orde en zoekmachine geoptimaliseerd. Neem contact op voor een GRATIS consult. Wij nemen je webshop onder de loep zodat jij precies weet waar je kansen liggen en nog meer rendement uit je webshop kan halen.

Download jouw gratis ebook
  • Blog

De voor- en nadelen van verschillende Webfonts technieken
28
Juli 2014
Web & interaction design

De voor- en nadelen van verschillende Webfonts technieken

28 juli 2014 | Geert | Web & interaction design

h1#test {

    Font family: ‘Century Gothic’, Arial, sans-serif;
}

In dit voorbeeld wordt bij gebruikers die Century Gothic op hun desktop of ander device geïnstalleerd hebben deze font gebruikt. Als deze niet aanwezig is zal de tekst het font Arial meekrijgen en mocht ook deze niet aanwezig zijn dan wordt een alternatief sans-serif (schreefloos) font toegekend.

Zoals u zelf wel kunt bedenken zal de website dan echter niet voor alle gebruikers hetzelfde getoond worden. En dat is natuurlijk wel wat u graag wilt. Bij het opknippen test u waarschijnlijk ook met één (de eerste) font. In deze blog zetten wij daarom drie belangrijke technieken voor u op een rij welke u kunt toepassen om toch die ene font te kunnen gebruiken voor alle bezoekers.

1. Cufon

Cufon is een verouderde techniek die steeds minder wordt toegepast, maar toch de moeite waard is om te behandelen. Cufon is een jQuery plugin welke u alleen kunt gebruiken nadat u de library heeft gedownload en deze heeft geladen in de head van uw website. De font die u wilt gebruiken moet u vervolgens uploaden via cufon.shoqolate.com/generate, waarna u ook het gegeneerde .js bestand laadt in de head van uw website. Via een simpele jQuery function kunt u dan het zojuist geüploade font toekennen aan website elementen:

Cufon.replace('h1#test');

Via bovenstaande functie wordt het gewenste font toegekend aan alle h1 elementen met als id ‘test’.

Cufon heeft zowel voor- als nadelen, welke wij hieronder voor u op een rij hebben gezet:

Voor- en nadelen

+ Cufon wordt ondersteund door alle browsers.
+ Cufon werkt met alle fonts.
+ Er hoeven weinig instellingen verricht te worden bij de installatie van Cufon.
+ Het gebruik van Cufon gaat bijna niet ten koste van de laadtijd van uw website.

- Wanneer gebruikers Javascript hebben uitgeschakeld, zullen Cufon functions niet worden uitgevoerd en zal de tekst niet in het gewenste font worden getoond maar zoals met CSS is meegegeven.
Geef daarom altijd een alternatief mee in CSS.
- Doordat Cufon teksten omzet in afbeeldingen kan het niet worden toegepast op ‘variabele’ tekst, zoals die in zoekvelden.
- Als gevolg daarvan kan de tekst ook niet geselecteerd en vervolgens bijvoorbeeld gekopieerd worden. De techniek is dan ook vooral geschikt voor het vormgeven van titels en koppen en niet voor grote lappen tekst.
- Sommige smartphones hebben problemen met het laden van Cufon tekst; die geven de tekst ‘hakkelig’ weer.

2. @font-face

Met @font-face kun u een font uploaden naar uw webserver en deze toekennen aan een font-family. Die kunt u vervolgens met CSS toekennen aan website elementen.

@font-face wordt door de belangrijkste browsers (Internet Explorer 9 en hoger, Firefox, Opera, Chrome, Safari) ondersteund. IE ondersteunt alleen .eot type fonts, waar de andere browsers .ttf en .otf types gebruiken. U kunt daarom de font eerst “omzetten” via Font Squirrel. De output die u krijgt is een .rar met vier type bestanden: .eot, .ttf, .svg en .woff. Deze bestanden moet u uploaden naar uw server en via het juiste pad toekennen aan een bepaalde font-face.

In onderstaand voorbeeld ziet u hoe dat werkt. Door deze code kan de font-family ‘bauhaus_93regular’ toegekend worden aan elementen op de website.

@font-face {
    font-family: bauhaus_93regular;                                              
    src: url('bauhs93-webfont.eot');                                             
    src: url('/bauhs93-webfont.eot?#iefix') format('embedded-opentype'),
        url('bauhs93-webfont.woff') format('woff'),
        url('bauhs93-webfont.ttf') format('truetype'),
        url('bauhs93-webfont.svg#bauhaus_93regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

In het .rar bestand van Font Squirrel zit overigens al een CSS-bestand, waarbij de @font-face al voor u is aangemaakt. Deze code hoeft u alleen maar te kopiëren en in uw CSS te plakken, waarna u het lettertype kunt toekennen aan elementen op de website.

Voor- en nadelen

+ @font-face is gemakkelijk te implementeren. Zeker als u gebruik maakt van Font Squirrel is het slechts een kwestie van kopiëren-plakken om de gewenste font te gebruiken.
+ Met @font-face wordt ‘echte’ tekst gegenereerd. Het kan daarom ook gebruikt worden in variabele tekst, zoals in zoekvelden. En daardoor kan de tekst ook gekopieerd worden door bezoekers van uw website.

- De font-files zijn vaak erg groot. Daardoor kan het gebruik van @font-face ten koste gaan van de laadtijd van uw website.
- Cufon werkt niet met alle fonts. Sommige (commerciële) fonts staan op een ‘blacklist’ en kunnen niet bij Font Squirrel geüpload worden.
- @font-face werkt niet op alle (mobiele) browsers, zoals op Opera Mini, Nokia XPress Browser, Blackberry 4–5, Android 2.1, en Windows Phone 7–7.8. Geef daarom altijd een alternatief mee in CSS.

3. Google Fonts

Google fonts zijn te downloaden via http://www.google.com/fonts. Ook hierbij geldt dat het gebruik ervan erg eenvoudig is. In de lijst kiest u de gewenste font en klikt dan rechts op het icoontje Quick-use (zie onderstaand voorbeeld).

 gf

U komt dan terecht op een pagina waar bij punt 3 een link staat die u moet toevoegen aan de head van de website. Deze link ziet er als volgt uit:

http://fonts.googleapis.com/css?family=Montserrat+Subrayada

Bij punt 4 staat hoe u de font-family kunt toekennen aan de gewenste elementen:

font-family: 'Montserrat Subrayada', sans-serif;

Er zijn verschillende alternatieven voor Google Font, maar deze zijn vaak tegen betaling te gebruiken. Google Font is altijd gratis. Voorbeelden van betaalde services zijn https://typekit.com/ en http://fontdeck.com/. Als uw klant per se een font wil die wel op die services beschikbaar zijn en niet bij Google Fonts (en als het budget toereikend is), zijn dat dus prima alternatieven.

Voor- en nadelen

+ Werkt op de belangrijkste browsers (Google Crhome, Firefox, Safari, Opera, Internet Explorer 6+, Android 2,2+ en iOS 4.2+).
+ Ook erg gemakkelijk in gebruik. Het inladen van een externe CSS bestand is genoeg.
+ Zorgt voor ‘echte’ tekst dus ook geschikt voor ‘variabele’ tekst en het kopiëren van tekst door uw bezoekers.
+ Gaat slechts minimaal ten koste van de laadtijd van uw website. De fonts zijn gecomprimeerd en worden geladen van de snelle Google servers. Daarnaast is het mogelijk om alleen bepaalde stijlen van een font in te laden of zelfs alleen bepaalde letters.

- Afhankelijk van de Google servers. Als deze eruit liggen zal de ingeladen Google Font niet werken. Geef dus altijd een alternatief mee met CSS.

Welke is het meest geschikt voor u?

Aan u dus om een afweging te maken welke optie het meest geschikt is voor uw website. Voor grote lappen tekst is cufon wat ons betreft absoluut een no-go. Echter, als in de header van uw website een kekke tekst moet komen te staan die op de blacklist staat van Font Squirrel en niet beschikbaar is bij Google Fonts (en niet beschikbaar bij één van de betaalbare alternatieven of u heeft daarvoor niet het budget) dan is ook Cufon het overwegen waard. Belangrijk is wel om tijdens het ontwerpen al rekening te houden met de mogelijkheden en te onderzoeken of en hoe een font gebruikt kan worden.

 

Deel deze blog post:

Geert van Soest | Webdeveloper

Webdeveloper Geert houdt zich bezig met het ontwikkelen van software. Tevens expert op gebied van snelheidsoptimalisatie.

Neem contact met mij op Contact
blog comments powered by Disqus
© 2008-2019 - VisionEars B.V. - Meetbaar online succes