Lettertype wijzigen homepage van twenty seventeen

Klaarblijkelijk hebben ze het erg druk, de WordPress administrators want mijn eerder reactie staat nog steeds on-hold (al ruim 5 dagen…) omdat die goedgekeurd moet worden. Heb al bericht in Slack geplaatst maar daar wordt ook niet op gereageerd. Hieronder dus nogmaals een poging tot hulp.

In principe dien je eerst dit font om te zetten naar een zogeheten webfont zodat je deze als fontface kunt gebruiken in je css.

Ga op je pc naar \Windows\fonts\ en zoek daar Futura font op. Als het goed is zijn het meerdere files. Je neemt alleen degene die je wilt gebruiken (bijvoorbeeld Regular en Bold).

Kopieer deze files naar je bureaublad en ga naar een font-face generator zoals transfonter.org. Selecteer eerst de fonts die je wilt omzetten via “Add fonts”. Daarna klik je op “Convert”. Klik nu op “Download”. In de zip file zitten een aantal files (5 stuks). Je hebt alleen de 3 font-face files nodig: .ttf, .wof en .eot. Kopieer deze files naar je website map sitenaam.nl/wp-content/themes/jouw-thema-naam/fonts/ en log daarna in, in je WordPress admin gedeelte. Ga dan naar ‘Weergave’ > ‘Customizer’ > ‘CSS’ en voeg daar de inhoud toe van de .css file die in de ZIP zat waar ook de 3 font-face bestanden in stonden. Als het goed is staat in de .css file namelijk de opmaak om een font-face toe te voegen aan je css, bijvoorbeeld:

@font-face {
    font-family: 'Futura';
    src: url('Futura.eot');
    src: url('Futura.eot?#iefix') format('embedded-opentype'),
        url('Futura.woff') format('woff'),
        url('Futura.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Je dient nu nog de paden aan te passen, zodat je css de files ook daadwerkelijk vindt. Bijvoorbeeld:

@font-face {
    font-family: 'Futura';
    src: url('jouwdomeinnaam/wp-content/themes/jouw-thema-naam/fonts/Futura.eot');
    src: url('jouwdomeinnaam/wp-content/themes/jouw-thema-naam/fonts/Futura.eot?#iefix') format('embedded-opentype'),
        url('jouwdomeinnaam/wp-content/themes/jouw-thema-naam/fonts/Futura.woff') format('woff'),
        url('jouwdomeinnaam/wp-content/themes/jouw-thema-naam/fonts/Futura.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

‘Jouwdomeinnaam’ dien je te vervangen door je eigen domeinnaam.. Je hebt als het goed is nu het custom font/font-face toegevoegd aan je css en kunt deze nu definiëren op paragrafen, titel en andere elementen door bijvoorbeeld het volgende te doen in je css:

h1, h2, h3, h4, h5, h6 { font-family: 'Futura', Arial, sans-serif; }

Bovenstaande richt zich alleen op je titels, dit kun je in principe doen voor al je elementen.

Belangrijk: ik laat je de wijzigingen maken via de customizer van WordPress. Doe dit nooit in je style.css van je thema want die wordt overschreven zodra je je thema update waarmee je alle wijzigingen die je hebt gemaakt, ongedaan maakt. Je kunt eventueel een child theme maken en daar de aangepaste css inzetten ipv via de customizer. Lees hier meer en download het child theme voor twenty-seventeen: hyperlinkcode.com/blog/twenty-seventeen-child-theme/

• Deze reactie is gewijzigd 6 jaren, 4 maanden geleden door Ruurd de Wind.

Hey Tom. Geen dank, daar zijn we voor toch? Mocht je nog aanvullende hulp nodig hebben dan hoor ik het graag.

Als voor nu je vraagstuk beantwoord is, zou je het topic dan op “Opgelost” willen zetten?