[Resolved] Local Font

[Heidi]

Hi All,

I’m can’t get the local font to load and am not sure what I’m doing wrong. I’ve cleared my cache.

I’ve got the font files loaded via FTP to a FONTS folder in my child theme.

I’ve added this CSS–with my real domain https://domain.org in place of the ../

@font-face {
  font-family: 'PitchSans';
  src: url('../wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.eot');
  src: url('../wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.eot?#iefix') format('embedded-opentype'), 
       url('../wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.woff2') format('woff2'), 
       url('../wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.woff') format('woff');
  font-style: normal;
	font-weight:400;
}

.FontFamily {
  font-family: 'PitchSans';
}

And I have this in the functions.php for the child theme:

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

I can see the font in the Customizer > Typography and when I choose it, it loads some other font. What am I missing? Thanks for any help.

[Tom]

Hi there,

I’m seeing ../ in your code instead of the full domain in “Customize > Additional CSS”.

Can you confirm that you’re using the full domain in place of ../?

[Heidi]

Yes, here is the actual code I am using:

@font-face {
  font-family: 'PitchSans';
  src: url('https://couchfilmcollective.org/wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.eot');
  src: url('https://couchfilmcollective.org/wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.eot?#iefix') format('embedded-opentype'), 
       url('https://couchfilmcollective.org/wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.woff2') format('woff2'), 
       url('https://couchfilmcollective.org/wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.woff') format('woff');
  font-style: normal;
	font-weight:400;
}

.FontFamily {
  font-family: 'PitchSans';
}

[Tom]

Looks good now.

So which element have you applied the PitchSans font to? Have you selected it for any element in the Customizer?

[Heidi]

I have it on H1 now. It just looks like it’s pulling some other font as this is Pitch Sans.

[Tom]

When I try to access one of the font files, I’m getting a 403 error: https://YOUR-WEBSITE-URL/wp-content/themes/generatepress_child/fonts/PitchSansWeb-Bold.woff2

This is usually server related. If you report this to your hosting, they should be able to fix it.

[Heidi]

Ah ha! Okay, I’ll see if I can’t get them to fix that. Thanks so much for your help!

[Tom]

No problem 🙂

[Author]

Posts