Maak een webfont van je eigen handschrift

© PXimport

Maak een webfont van je eigen handschrift

Geplaatst: 16 december 2017 - 06:59

Aangepast: 14 december 2022 - 14:11

Toon van Daele

Eerder heb je kunnen lezen hoe je van je eigen handschrift een font kunt maken. Datzelfde font – of enig ander lettertype – kun je ook op je website plaatsen. Leuk, want dan kunnen je bezoekers je blogs voortaan ‘handgeschreven’ zien verschijnen.

Vergeten hoe je van je eigen handschrift een font kunt maken? Lees dan dit artikel nog eens terug.

Stap 1: Downloaden

We maken allereerst gebruik van de gratis Webfont Generator van Font Squirrel. Surf om te beginnen hiernaartoe en laat de optie Optimal aangestipt. Wil je absoluut alle fontdetails in eigen hand nemen, stip dan Expert aan.

Vervolgens klik je op Upload Fonts en verwijs je naar het gewenste fontbestand (ttf of otf) dat je hebt gedownload of gecreëerd. Als het goed is verschijnt het font even later op de webpagina. Met een vinkje bij Yes, the fonts I’m uploading are legally eligible for web embedding geef je aan dat er geen copyright op rust en dat je het recht hebt dat font (ook online) te gebruiken. De knop Download your kit verschijnt nu en je kunt je ‘webfont-pakketje’ downloaden.

Media has no description

© PXimport

Stap 2: Uittesten

De download komt in de vorm van een zip-archief dat je logischerwijze eerst uitpakt. Vervolgens dubbelklik je hier op het (enige) html-bestand; je browser opent nu een webpagina met een voorbeeld van het bewuste font. Klik bovenaan ook even op Sample layout en op Glyphs & languages.

Ziet alles er goed uit, dan moet je het font nog op je website krijgen. Uitgebreide instructies hiervoor vind je op het tabblad Installing webfonts. In stap 3 vertellen we je in een notendop waar dat op neerkomt.

Media has no description

© PXimport

Stap 3: Toepassen

Allereerst upload je de inhoud van het uitgepakte archief naar je website. Dat doe je op dezelfde manier als je webpagina’s uploadt. Je kunt er uiteraard ook een gratis ftp-client als FileZilla voor inzetten. Heb je bijvoorbeeld alles naar de rootmap van je site gekopieerd, dan neem je de volgende link op in het <head>-gedeelte in de html-code van je webpagina’s: <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />. Nu hoef je alleen nog op de gebruikelijke manier naar je font te verwijzen. Zo zorgt de regel h1 {font-family: 'jefont', Verdana, sans-serif; } in het (meegeleverde) stylesheet.css-bestand ervoor dat jouw handschrift zal verschijnen bij elke tekst die je van de <H1>-tag voorziet. Uiteraard moet je jefont wel vervangen door de exacte fontnaam. Die vind je in het stylesheet.css-bestand terug, achter font-family. In mijn geval was dat toon_van_daeleregular. En nu maar die bezoekers lokken!

Media has no description

© PXimport

Deel dit artikel
Voeg toe aan favorieten
ID.nl logo

ID.nl, onderdeel van Reshift BV, is in 2022 gestart en uitgegroeid tot de meest toonaangevende en complete consumentensite van Nederland. Het doel van ID.nl is om de consument te helpen met alle technologie die hoort bij het dagelijks leven: van smart-health-meters tot e-bikes, van warmtepompen tot zonnepanelen - en alles daar tussenin!

Duidelijk, betrouwbaar en onafhankelijk: ID.nl maakt moeilijke dingen makkelijk.

Contact

ID.nl

Nijverheidsweg 18

2031 CP Haarlem

info@id.nl

Telefoon: 023-5430000