[Support request] Custom Font Help Needed

[James Kraftchak]

I want to install a custom font to use on my website but I am not a coder and looking at the documentation on how to do it is confusing. I have downloaded the font that I want to use. Is it possible to just install the font or can someone give me a step by step on how to get the font working? I’m brand new to GeneratePress and I’m a bit confused as to what is needed to get the font installed. Thanks in advance.

[Tom]

Hi there,

Once the font files are downloaded, they need to be uploaded to your child theme: https://docs.generatepress.com/article/using-child-theme/

You can upload the files into your child theme using an FTP program, or the File Manager inside your hosting control panel. I suggest adding them into a folder named “fonts”.

Once you do that, you need to use @font-face in your CSS to link to the font files, and give them a name. This is a great article on it: https://css-tricks.com/snippets/css/using-font-face/

For example:

@font-face {
  font-family: 'MyWebFont';
  src: url('https://yourwebsite.com/wp-content/themes/generatepress_child/fonts/webfont.eot'); /* IE9 Compat Modes */
  src: url('https://yourwebsite.com/wp-content/themes/generatepress_child/fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://yourwebsite.com/wp-content/themes/generatepress_child/fonts/webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://yourwebsite.com/wp-content/themes/generatepress_child/fonts/webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://yourwebsite.com/wp-content/themes/generatepress_child/fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://yourwebsite.com/wp-content/themes/generatepress_child/fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Notice how each font file is referenced and linked to within your “fonts” folder?

Once the font is uploaded, referenced and named, we can add it to the Customizer options.

Let me know once you get this far and we can continue on. If you get hung up on anything just let me know 🙂

[James Kraftchak]

OK question for you. The font is in a zip file, do I have to extract that before I upload it? Also, having never used a child theme, does this allow me to use the font in the main theme then? Thanks.

[Tom]

Yes, you’ll need to unzip the file and upload the individual files to the fonts folder in your child theme.

The child theme still allows us to use the main theme – it simply allows us to upload files to our theme that won’t be lost when we update the parent theme.

[James Kraftchak]

OK I’ve followed all the steps you provided but when I go into Typography the font still isn’t showing. How do I get it so that I can use it? Thanks.

[Tom]

Perfect! Now we just need to add the font to the Customizer list.

Check out the function here: https://docs.generatepress.com/article/generate_typography_default_fonts/

Replace “My Font Name” with the same of the font-family value you specified in your @font-face block.

So in the above example, you would do this:

add_filter( 'generate_typography_default_fonts', 'tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'MyWebFont';
    return $fonts;
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then you should be able to choose the font in the Customizer like any other font 🙂

[Author]

Posts