Maak een webfont van je eigen handschrift

Door: Toon van Daele | 16 december 2017 08:59

Apps & Software

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.

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.

Snel dat font uploaden en even later kun je al je webfontkit ophalen.

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.

Check eerst of alles er wel goed uitziet.

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!

Boven: html, midden: css, onder: resulterende webpagina.

0 Reactie(s) op: Maak een webfont van je eigen handschrift

  • Om te reageren moet je ingelogd zijn. Nog geen account? Registreer je dan en praat mee!
  • Er zijn nog geen reacties op dit artikel.

Wanneer je een reactie plaatst ga je akoord
met onze voorwaarden voor reacties.