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

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

Home Forums Support Custom Fonts Not Displaying on Pages other than Home Page

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1971100
    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

    #1971128
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1971141
    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

    #1971159
    Ying
    Staff
    Customer Support

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

    #1971267
    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

    #1971332
    Elvin
    Staff
    Customer Support

    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)

    A wise man once said:
    "Have you cleared your cache?"

    #1971689
    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

    #1974051
    Elvin
    Staff
    Customer Support

    Nice one. No problem. Glad you got it sorted. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1974320
    Clay

    Marking as closed.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.