Site logo

Archived topic

custom font in the Customizer

3 replies · Started by andreas on August 2, 2020

Viewing posts 1–4 of 4

Hello I was wondering if you can help me to bring a custom font in the Customizer.
Step by step i'm new to programming and Wordpress.
But i can use bitvise ssh client so connect to my server

Thanks i saw that but i'm struggling with the steps.
I would like to use this one

Fonts

Hi there,

Try the steps:

1. Use the Font Squirrel generator to create you web fonts and @font-face CSS:

https://www.fontsquirrel.com/tools/webfont-generator

The Optimal option should be fine.

2. Open the ZIP it creates you will need the .woff, .woff2 and .css file.

3. Add a Child Theme to your site:

https://docs.generatepress.com/article/using-child-theme/

You will need to access your Child Theme folder via FTP or File Edtior on your server.

4. In your child theme create a Folder named Fonts and within add the .woff and .woff2 files.

Make a note of the URLs for these fonts it will be something like this:
https://my-website.com/wp-content/themes/generatepress_child/fonts/my-font.woff2

5. Copy the CSS file from step 2 into your child theme styles.css file and update the 2 x URLs.

6. Edit your child themes functions.php and add this function:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'my-font-name';

    return $fonts;
} );

Change the my-font-name to the font-family name in your @font-face CSS ( step 5 ).

This archived topic is closed to new replies.