Aangepaste Lettertypen Toevoegen

Wat kun je hiermee?

• Je merktypografie matchen — gebruik exact hetzelfde lettertype in het boekingsproces als op je website.
• Elke Google Font toevoegen die niet in de standaardlijst van 30 staat.
• Een zelf-gehost lettertype gebruiken (zoals een eigen huisstijllettertype) dat niet beschikbaar is op Google Fonts.
• Een lettertype hergebruiken dat je thema al laadt zonder het dubbel te laden.

Waar vind je het?

1. Klik in het WordPress-adminmenu op RepairPlugin.
2. Klik op Settings in het submenu.
3. Klik in de instellingensidebar op Front-End Steps.
4. Zoek in de sectie Branding de dropdown Choose a font.

Na het toevoegen van een aangepast lettertype via code, verschijnt het in deze dropdown naast de ingebouwde lettertypen.

https://www.repairplugin.com/wp-admin/admin.php?page=wp_repair_settings&section=styling

https://www.repairplugin.com/book-a-repair

Hoe stel je het in?

Dit is een functie op ontwikkelaarsniveau. Je moet een codefragment toevoegen aan het functions.php-bestand van je thema of een aangepaste plugin.

Een Google Font toevoegen

Voeg deze code toe aan het functions.php-bestand van je thema (of een sitespecifieke plugin):

add_filter( 'rp_get_font_options', 'my_custom_rp_font', 10, 1 );

function my_custom_rp_font( $fonts ) {

    $fonts['my_custom_font'] = array(
        'name'        => 'My Custom Font',
        'font_link'   => '<link href="https://fonts.googleapis.com/css2?family=My+Custom+Font:wght@300;400;500;600;700&display=swap" rel="stylesheet">',
        'font_family' => '"My Custom Font", sans-serif',
    );

    return $fonts;
}

Elk lettertype-item heeft drie waarden nodig:

De array-sleutel (bijv. 'my_custom_font') moet een unieke slug zijn — kleine letters, geen spaties, met underscores.

Een zelf-gehost lettertype toevoegen

Als je lettertype niet beschikbaar is op Google Fonts, host je het lettertypebestand zelf en verwijs je ernaar:

add_filter( 'rp_get_font_options', 'my_selfhosted_rp_font', 10, 1 );

function my_selfhosted_rp_font( $fonts ) {

    $font_url = get_stylesheet_directory_uri() . '/fonts/MyBrandFont.woff2';

    $fonts['my_brand_font'] = array(
        'name'        => 'My Brand Font',
        'font_link'   => '<style>@font-face { font-family: "My Brand Font"; src: url("' . $font_url . '") format("woff2"); font-weight: 100 900; font-display: swap; }</style>',
        'font_family' => '"My Brand Font", sans-serif',
    );

    return $fonts;
}

Zorg ervoor dat het lettertypebestand (bijv. .woff2) in de verwezen map binnen je thema staat.

Een lettertype gebruiken dat je thema al laadt

Als je WordPress-thema het lettertype al laadt, stel dan font_link in op een lege string. RepairPlugin gebruikt de font_family-waarde direct:

add_filter( 'rp_get_font_options', 'my_theme_font_for_rp', 10, 1 );

function my_theme_font_for_rp( $fonts ) {

    $fonts['theme_font'] = array(
        'name'        => 'My Theme Font',
        'font_link'   => '',
        'font_family' => '"My Theme Font", sans-serif',
    );

    return $fonts;
}

Je aangepaste lettertype selecteren

Na het toevoegen van de code:

1. Ga naar RepairPlugin > Settings > Front-End Steps.
2. Open in de sectie Branding de dropdown Choose a font.
3. Je aangepaste lettertype verschijnt nu in de lijst.
4. Selecteer het en klik op Save Changes.
5. Controleer je boekingspagina om te verifiereren dat het lettertype er goed uitziet.

Instellingenoverzicht

Ingebouwde lettertypen

RepairPlugin bevat standaard deze 30 lettertypen: Archivo, Arial, Assistant, Barlow, Cabin, DM Sans, Fira Sans, Hind, Inter, Josefin Sans, Kanit, Karla, Lato, Manrope, Merriweather, Montserrat, Muli, Noto Sans, Nunito, Open Sans, Oswald, Playfair Display, Poppins, Quicksand, Raleway, Roboto, Roboto Slab, Signika, Source Sans Pro, Titillium Web, Ubuntu en Work Sans. Het standaardlettertype (wanneer er geen is geselecteerd) is Montserrat.

Veelgestelde vragen

Gerelateerde artikelen

• Huisstijl — Logo & Kleur
• Reparatiebox Styling
• Shortcodes