Hoe zet ik een font om naar een webfont

Er zijn verschillende manieren om een font om te zetten naar een webfont. Je kunt een Google font uitzoeken in de design fase. Een Google font hoef je alleen maar aan te roepen in je stylesheet (CSS). Een andere manier is om een OTF of TTF lettertype bestand om te zetten naar webfonts. Hier zijn diverse generators voor. Een overzicht van de meest handige generators.

Font Squirrel

font-squirrel

De meest gebruikte, accurate en gedetailleerde converter is Font Squirrel. Een handige tool om fonts om te zetten. Het nadeel is dat er een groot aantal fonts geregistreerd zijn. Veel ontwerpers gebruiken bijvoorbeeld standaard fonts geleverd bij Adobe paketten zoals Indesign en Photoshop.

Het concept is eenvoudig. Je upload je Windows font en selecteert hoe je deze wilt converteren. Je kunt hem in de basis converteren. Dit is voor de performance van je website beter, echter kan het wel allemaal wat pixellig overkomen.
De Optimal modus is de meest gebruikte. Font Squirrel zal het font converteren met de meest gebruikte instellingen. De expert modus is voor de die hard font converters onder ons. Voor de gewone leek onder ons te ingewikkeld.

Font2Web

font2web

Een alternatief op Font Squirrel is Font2Web. Een tool die misschien minder accuraat als Font Squirrel is. Daar staat tegenover dat deze wel alle fonts kan converteren. Het nadeel van Font2Web is dat deze niet de expert opties heeft zoals Font Squirrel.

Cufón

cufon

Met Cufón kun je de verschillende Windows Fonts stijlen uploaden. Cufón zet dit om naar Javascript. De werking is eenvoudig. De uitwerking ziet er ook strak uit. Helaas zijn dit vaak wel grote bestanden die er uit komen. Dit vertraagd de website weer.

Google Webfonts

google-webfonts

Zoals eerder gemeld zijn hier niet de ‘standaard’ Windows fonts te vinden, maar wel ontzettend veel fonts die er op lijken. Verder is het zeer eenvoudig te implementeren: Je plaatst een javascript file in de header van je document, of een import regel aan de bovenzijde van je stylesheet.

Welk Google font lijkt het meeste op mijn Font

Een handige link waar ze alvast enkele tientallen fonts voor je vergeleken hebben is deze website. Hier zie je het originele font links en de Google font rechts. Een heel handig overzicht om zo alsnog een fancy Google webfont te krijgen, zonder pixels of licentie problemen!

Wat voor font is dit?

whatthefont

Een veelgestelde vraag via Twitter is de vraag wat voor soort font dit is. En met ‘dit’ bedoelt men dan een plaatje van een logo of een stukje tekst. Via What the Font kun je dit plaatje uploaden en aangeven om welke karakters dit gaat. De site zoekt dan het juiste font er bij. Redelijk accuraat. Het nadeel is wel dat het plaatje van een behoorlijke resolutie moet zijn om de juiste font te vinden.

Kortom

Keuze genoeg dus om jouw ideale font type face te plaatsen binnen een website.

Heb je nog makkelijkere tools of betere websites om fonts te vergelijken / creeeren? Plaats ze in de comments!

Belsimpel.nl - de sympathieke webshop uit Groningen!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *