[Resolved] Adding a custom font not working

[Matic]

Hey,

I tried adding a custom font “Museo Sans” following your instructions (https://docs.generatepress.com/article/adding-local-fonts/), but I couldn’t make it work.

First, I thought that there might be something wrong with my font, so I repeated the process with a Google font from: https://google-webfonts-helper.herokuapp.com/fonts/abel

1. I’ve read all the support articles; none solve my issue.
2. I disabled caching.
3. I am using a child theme.
4. Here’s my style.css code for the Google font (Abel):

@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
	  src: url('https://www.photutorial.com/wp-content/themes/generatepress_child/Fonts/abel-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Abel'), local('Abel-Regular')
       url('https://www.photutorial.com/wp-content/themes/generatepress_child/Fonts/abel-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.photutorial.com/wp-content/themes/generatepress_child/Fonts/abel-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.photutorial.com/wp-content/themes/generatepress_child/Fonts/abel-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.photutorial.com/wp-content/themes/generatepress_child/Fonts/abel-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.photutorial.com/wp-content/themes/generatepress_child/Fonts/abel-v12-latin-regular.svg#Abel') format('svg'); /* Legacy iOS */
}

5. You may check that the files are actually located there.
6. My functions.php code:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Abel';

    return $fonts;
} );

7. Abel is still not loading in my Customizer. I can see “Abel” under “System fonts” in Typography, but it does not load.

I also tried copying CSS into “Additional CSS”.

Any ideas?

Cheers,
Matic

[Elvin]

Hi there,

Can you try disabling your caching/optimization plugin and check again? (site seems to be running SG Optimizer).

Let us know how it goes.

[Matic]

I tried disabling everything: SG Optimizer, Cloudflare, and NitroPack, but to no avail.

EDIT: Other fonts, both System and Google, load properly.

[David]

Hi there,

can you disable the cache plugins entirely so i can see why the Child Theme CSS is not loading.

[Matic]

Sure thing. Could you let me know when you’ll be online, so I don’t leave it cache-less for hours?

[Matic]

Any update? 🙂

[David]

The west coast team will generally log on around this time … so if you want to switch the caches off i am sure one of us will be available in the next hour or two.

[Matic]

Alright, thanks for info 🙂 I disabled all caching.

[Tom]

Hi there,

I’m still seeing Siteground Optimizer activated which makes it hard to read your source.

In order to debug this, I’ll need Abel (or whatever custom font) to be saved in the Customizer, and I’ll need to know which element it’s applied to so I can inspect it.

Let us know 🙂

[Matic]

Hi,

I re-enabled my caching after 2 hours. If you want, I can give you credentials. I think this would be easier.

EDIT: I now tried reinstalling child theme. It did not help.

Cheers

[Matic]

I managed to fix it. I am not sure what exactly helped, but I reuploaded the fonts, reinstalled the child theme and it started to work.

Cheers,
Matic

[Tom]

Glad you got it sorted! 🙂

[Author]

Posts