Je eigen lettertype op je website zetten

Je zoekt harmonie en je wilt je huisstijl lettertype op je website neerzetten. je hebt al 101 codes, plugins geprobeerd en je weet gewoonweg niet hoe je dit voor elkaar krijgt. In deze blog ga ik je uitleggen hoe je dit in kunt zetten voor je wordpress website.

Stap 1

Je hebt verschillende documenten van je lettertypes nodig om het werkend op je website te krijgen. Vaak hebben we een .otf of .ttf lettertype.

Je lettertype in verschillende formats maken voor je website

1. Ga naar (deze link) en upload je fonts.
2. Klik expert aan i.p.v optimal.
3. Klik extra aan bij font formats: Truetype en SVG
4. Onderaan de rode tekst vinkje aanzetten
5. Klik op upload.

Stap 2:

Upload de bestanden naar je website en onthoud de URL. Mijne is bijv.

https://www.herkenjemerk.nl/wp-content/uploads/fonts/alegreya.ttf

Stap 3

Voeg deze code toe en verander de URL in de URL van je lettertypes

@font-face {
font-family: ‘alegreya’;

src: url(‘https://www.herkenjemerk.nl/wp-content/uploads/fonts/alegreya.ttf’);

src: url(‘https://www.herkenjemerk.nl/wp-content/uploads/fonts/alegreya.woff’) format(‘woff’),

url(‘https://www.herkenjemerk.nl/wp-content/uploads/fonts/alegreya.ttf’) format(’truetype’),a

url(‘https://www.herkenjemerk.nl/wp-content/uploads/fonts/alegreya.svg#font1’) format(‘svg’);

font-weight: normal;
font-style: normal;

}

Stap 4

Ga vervolgens na welke H1 (titel) je verandert wil hebben en zet deze code erbij: Verander alegreaya voor de exacte naam van het lettertype die je upload.

h1 {
font-family: ‘alegreya’ !important;
}

of als je meerdere titels jouw unieke letterype kun je ze apart benoemen of zoals hieronder:

h1, h2, h5 {
font-family: ‘alegreya’ !important;
}