[Resolved] Custom Fonts Not Displaying on Pages other than Home Page

[Clay]

I used this doc to upload fonts: https://docs.generatepress.com/article/adding-local-fonts/

Things seem to have gone well. I can see my fonts in Customizer. The homepage is working just fine, the fonts seem to have taken affect on all areas of the page… then I click into the site, any other navigation item, and the font isn’t rendering, it seems to be defaulting to a Times font or something.

What did I miss?

Thanks,
-Clay

[Ying]

Hi Clay,

I tried to compare your home page font and the example of the font, they don’t look the same to me.
https://www.screencast.com/t/s4Me4S8vGp

Are you sure the home page is using the UNIVERS LT STD FONT?

Can you share all the codes you used to install this font(please use the code option to wrap them so we can see the format as well)?

Let me know 🙂

[Clay]

The homepage is using the fonts that I were sent… whether that is UNIVERSE LT STD, not entirely sure. I uploaded the font files that I received from the Designer to wp-content/uploads/fonts/

CSS:

@font-face {
    font-family: UniversLTStd;
    src: url("wp-content/uploads/fonts/UniversLTStd.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: UniversLTStd;
    src: url("wp-content/uploads/fonts/UniversLTStd-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: UniversLTStd Condensed;
    src: url("wp-content/uploads/fonts/UniversLTStd-Cn.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: UniversLTStd Light;
    src: url("wp-content/uploads/fonts/UniversLTStd-Light.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

SNIPPETS:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'UniversLTStd';
	$fonts[] = 'UniversLTStd Condensed';
	$fonts[] = 'UniversLTStd light';

    return $fonts;
} );

I was able to select the font in Customizer. I’ve only changed Body and H2 to Univers LT STD.

Thank you!
-Clay

[Ying]

Can you try add''to wrap the font names in CSS?
For example, change UniversLTStd to 'UniversLTStd'

[Clay]

I made that change… no change to the fonts on the site.

I feel there may be a misunderstanding… the homepage is good to go (https://cdi.claybeyer.com/)

The other pages are what’s wrong, for example: https://cdi.claybeyer.com/interior-environments/

The entire site switches fonts on every page but the homepage. This is the issue. Homepage is good to go, it’s what I want.

What is wrong with the other pages? Why is the font not taking affect?

Thanks,
-Clay

[Elvin]

Hi Clay,

The issue is with the pathing on the request.

On your the other pages, what happens is the font path changes to the current page permalink + /wp-content/uploads/fonts/UniversLTStd.otf . this causes error 404 because the file isn’t found.

It should always just be /wp-content/uploads/fonts/UniversLTStd.otf

That said, can you change the @font-face url importation to not use relative path? Can you try adding the whole URL? (including the domain)

[Clay]

Yes, this now works correctly. I must have misread the instructions and put

src: url("wp-content/uploads/fonts/UniversLTStd-Cn.otf") format("opentype");

instead of

src: url("/wp-content/uploads/fonts/UniversLTStd-Cn.otf") format("opentype");

The site now displays all fonts properly…

Thank you for all the help!
-Clay

[Elvin]

Nice one. No problem. Glad you got it sorted. 😀

[Clay]

Marking as closed.

[Author]

Posts