Adding Custom Fonts

What can you do with this?

• Match your brand typography — use the exact same font in the booking flow as on your website.
• Add any Google Font that isn't in the default list of 30.
• Use a self-hosted font (like a proprietary typeface) that isn't available on Google Fonts.
• Reuse a font your theme already loads without loading it twice.

Where to find it

1. In the WordPress admin menu, click RepairPlugin.
2. Click Settings in the submenu.
3. In the settings sidebar, click Front-End Steps.
4. In the Branding section, find the Choose a font dropdown.

After adding a custom font via code, it appears in this dropdown alongside the built-in fonts.

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

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

How to set it up

This is a developer-level feature. You'll need to add a code snippet to your theme's functions.php file or a custom plugin.

Adding a Google Font

Add this code to your theme's functions.php file (or a site-specific 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;
}

Each font entry needs three values:

The array key (e.g., 'my_custom_font') must be a unique slug — lowercase, no spaces, using underscores.

Adding a self-hosted font

If your font isn't available on Google Fonts, host the font file yourself and reference it:

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;
}

Make sure the font file (e.g., .woff2) is placed in the referenced directory within your theme.

Using a font your theme already loads

If your WordPress theme already loads the font, set font_link to an empty string. RepairPlugin will use the font_family value directly:

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;
}

Selecting your custom font

After adding the code:

1. Go to RepairPlugin > Settings > Front-End Steps.
2. In the Branding section, open the Choose a font dropdown.
3. Your custom font now appears in the list.
4. Select it and click Save Changes.
5. Check your booking page to verify the font looks right.

Settings reference

Built-in fonts

RepairPlugin includes these 30 fonts by default: 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, and Work Sans. The default font (when none is selected) is Montserrat.

Frequently asked questions

Related articles

• Branding (Logo & Color)
• Repair Box Styling
• Shortcodes