Ondersteuning Volgende » CSS / opmaak vragen Volgende » Lettertype wijzigen homepage van twenty seventeen

  • Beste mensen,

    Ik wil graag het lettertype dat op mijn homepage staat wijzigen. Ik wil het graag in Futura Book hebben staan.

    Hoe moet ik dat doen?

    Alvast bedankt!
    Tom

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Dag mensen,

    Ik zie dat er nog geen antwoord is. Dat kan.
    Maar ik vraag me af waarom, is dit inderdaad onmogelijk? Dan moet ik me er bij neerleggen natuurlijk.
    Ik hoop dat er nog iemand een poging wil doen om me te helpen!
    Alvast dank!

    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/

    Dag Ruurd,
    Bedankt voor jouw zeer uitgebreide antwoord. Deze week ga ik er samen met iemand die meer van dit soort zaken begrijpt, jouw stappenplan proberen uit te voeren!

    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?

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)