Webfonts gebruiken met Google Fonts

Home/Design, temp, Theme's/Webfonts gebruiken met Google Fonts

Webfonts gebruiken met Google Fonts

Google Fonts - webfonts

Google Fonts : Onderscheid jouw website door gebruik van niet standaard lettertypen.

Vind je websites met de standaard lettertypen zoals bijvoorbeeld “Times New Roman”, “Arial”, “Helvetica”, “Sans-serif” saai? Probeer eens Google Fonts / Google web fonts.

Hoewel er met verschillende methoden de afgelopen jaren is ge-experimenteert is er eigenlijk pas enkele jaren een breed ondersteunde techniek die het mogelijk maakt gebruik te maken van afwijkende lettertypen.

Deze kun je grofweg in tweeën splitsen: een gratis of een betaalde service. Binnen deze context kijken wij naar een gratis service en wel die van Google:

Welkom bij Google Fonts!

Google is niet alleen een grote partij (met ook een grote collectie lettertypen of fonts), maar bied deze dienst ook gratis aan. Bovendien maakt Google het gebruik ervan erg makkelijk.

Hoe kun je gebruik maken van Google webfonts?

  1. Ga naar google-webfonts-1

je kunt hier direct aan de slag door een zogenaamde webfont collectie te maken. dit is een verzameling van fonts die je wilt gebruiken in jouw website.

  1. selecteer de fonts die je leuk vind en voeg ze toe aan jouw collectie door op de blauwe “add to my collection”-knop te drukken. (zie afbeelding hieronder (rode pijl)

Wees uiterst spaarzaam met het aantal fonts! Elk font moet apart worden gedownload en kost dus tijd: jouw website wordt er dus (hoe klein het verschil ook mag zijn) langzamer van.

googlewebfont-collectiemaken

Maak een collectie van fonts in Google webfonts om deze als lettertype te gebruiken in jouw website.

nadat je een collectie hebt gemaakt, druk je op de knop use in de grijze balk onderaan. Optioneel kun je het lettertype bekijken door op de knop review te drukken. Zie de groene pijl in afbeelding hierboven.

  1. Nadat je op de knop “use” gedrukt hebt kom je in het laatste scherm waarin je enkele opties kunt aangeven en uiteindelijk de code kunt ophalen om op te nemen in jouw website
googlewebfont-collectie-use

Gebruik jouw Google WebFonts collectie, geef enkele opties op en kies de code welke je wilt gebruiken.

een leuke gadget is de meter rechts. Deze geeft ene indicatie van de snelheid-impact is van jouw gekozen font collectie snelheid.

Scrol verder naar onderen om eventuele opties uit te kiezen.

  1. Tenslotte kun je de code kopiëren & plakken in jouw eigen website.

je kunt daarbij kiezen uit de volgende methoden:

  • standard

Hierbij neem je een code regel in html op tussen <head> en </head> die er bijvoorbeeld als volgt uitziet:

en bepaal je met CSS de volgende style definitie:

  • @import

Deze optie is eigenlijk hetzelfde als standard, maar verdient mijn voorkeur, omdat je alle code opneemt in het CSS bestand. In het css-bestand neem je een regel code op die eruit ziet als volgt

en je definieert een style als volgt (voorbeeld):

  • Javascript

zelfde als standard, maar werk je met javascipt. helaas heb ik hier niet veel ervaring mee, maar zal in sommige situaties ongetwijfeld beter toepasbaar zijn.

 

 



03 GIF Banner


728x90_ShutterStock-Culture_NL_animated



WordPress Membership Plugin


KPN Algemeen 728 x 090



Brand Communication Image Banner 728 x 90
Codecanyon wide 728 x 90
Themeforest wide 728 x 90


Coolblue 728x90


Go Daddy NL 728x90 30 off

 

About the Author:

Webulous
Webulous.net is een initiatief van Simple Online Solutions, een full service provider voor website ontwikkeling, promotie, onderhoud en advies op maat. Doordat wij regelmatig leuke uitdagingen krijgen voorgelegd, steken wij veel tijd in research en testwerk om bepaalde vraagstukken op te lossen. Veel van deze oplossingen zijn (gedeeltelijk) universeel toepasbaar en delen wij deze graag met de internet community. Op deze manier hopen wij iets terug te geven aan de community die ons ook vaak tot de oplossing bracht.

2 Comments

  1. Paul b november 20, 2013 at 3:25 pm - Reply

    Hoi,

    Ik wil een font gebruiken dat bij google fonts niet voorkomt. Is er een andere oplossing?

    Dank,

    Paul

    • Webulous
      Webulous november 20, 2013 at 8:18 pm - Reply

      Hallo Paul,

      Ja er is een oplossing: use any font.
      Dit is een plugin waarbij je elk willekeurig font (heb alleen ervaring met “ttf”) kunt gebruiken.
      Het gebruik voor 1 enkele site is gratis. wel heb je een api-key nodig en moet je een(gratis) account aanmaken.
      Deze is nodig om het door jou gekozen font om te zetten naar een ander formaat. dit omgezette bestand wordt dan weer teruggestuurd naar jouw website.
      Deze api-key kun je slechts voor 1 site tegelijk gebruiken: doneer de makers een klein bedrag en jekrijgt van hun een levenslang bruikbare versie zonder limiet.
      (kan al vanaf 10 dollar!)

      succes

Leave A Comment