[Resolved] Site displaying fallback font sometimes

Home Forums Support Site displaying fallback font sometimes

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #960892
    Alex

    Hi team GP

    I’ve installed custom fonts on my site, following your walkthrough using the PHP snippets etc. It all works but sometimes the body copy is displaying in the fallback monospace font rather than Space Mono from Google – any idea why?

    It happens on desktop & mobile and on both Chrome & Safari

    Many thanks,

    Alex

    #961241
    Leo
    Staff
    Customer Support

    Hi there,

    Can you guide me to the section where I can see the issue?

    #961260
    Alex

    Hi Leo,

    It happens across the whole site!

    Thanks,

    Alex

    #961269
    Leo
    Staff
    Customer Support

    It all works but sometimes the body copy is displaying in the fallback monospace font rather than Space Mono from Google

    So the fallback font is Monospace? I checked a few elements and don’t see it.

    Can you guide me to a sentence or paragraph?

    #961271
    Alex

    Hi Leo,

    The portfolio page is a good example, the paragraph class ‘portfolio description’ is styled with the following –

    .portfolio-description {
        font-family: 'Space Mono', monospace;
        font-size: 70%;
        color: #bfc4bf;
        letter-spacing: 0.5px;
        line-height: 150%;
        hyphens: none;
    }
    #961549
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like it’s using Space Mono to me. When exactly are you noticing that it isn’t working? Is there something I can do to replicate the issue?

    #961742
    Alex

    Hi Tom,

    I’ve opened a private tab in Safari and that seems to make it display the fallback

    Thanks,

    Alex

    #962118
    Tom
    Lead Developer
    Lead Developer

    Where are you defining the URLs for the Space Mono font?

    I’m also seeing that it’s being called as a Google Font. Can you share the code you used to add it to the Customizer?

    #962510
    Alex

    Hi Tom,

    I have the following PHP snippets in there –

    add_filter( 'upload_mimes', function( $mimes ) {
        $mimes['woff']  = 'application/x-font-woff';
        $mimes['woff2'] = 'application/x-font-woff2';
        $mimes['ttf']   = 'application/x-font-ttf';
        $mimes['svg']   = 'image/svg+xml';
        $mimes['eot']   = 'application/vnd.ms-fontobject';
    
        return $mimes;
    } );
    
    --
    
    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'Open Sans';
    
        return $fonts;
    } );
    
    --
    
    add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
    function tu_add_google_fonts( $fonts ) {
    	$fonts[ 'space mono' ] = array( 
    		'name' => 'space mono',
    		'variants' => array( '400', '500', '700' ),
    		'category' => 'serif'
    	);
    
    	return $fonts;
    }
    
    --
    
    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'gt pressura';
    
        return $fonts;
    } );
    

    And then the following CSS in through simple CSS

    @font-face {
        font-family: 'GT Pressura-bold';
        src: url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura-Bold.woff2') format('woff2'),
            url('https://dev-jameshfilm.xyz/wp-content/themes/generatepress/fonts/GTPressura-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'GT Pressura-light';
        src: url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura-Light.woff2') format('woff2'),
            url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'GT Pressura';
        src: url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura.woff2') format('woff2'),
            url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    
    @import url('https://fonts.googleapis.com/css?family=Space+Mono&display=swap');
    
    
    #962612
    Tom
    Lead Developer
    Lead Developer

    Try this instead:

    add_filter( 'generate_typography_customize_list', function( $fonts ) {
    	$fonts[ 'space_mono' ] = array( 
    		'name' => 'Space Mono',
    		'variants' => array( '400', '500', '700' ),
    		'category' => 'serif'
    	);
    
    	return $fonts;
    } );

    Then remove this:

    @import url('https://fonts.googleapis.com/css?family=Space+Mono&display=swap');

    Let me know 🙂

    #962614
    Alex

    Hi Tom,

    So add that PHP as a new snippet?

    #962616
    Tom
    Lead Developer
    Lead Developer

    Replace this function with the new one:

    add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
    function tu_add_google_fonts( $fonts ) {
    	$fonts[ 'space mono' ] = array( 
    		'name' => 'space mono',
    		'variants' => array( '400', '500', '700' ),
    		'category' => 'serif'
    	);
    
    	return $fonts;
    }
    #962755
    Alex

    Thanks for that Tom,

    Only page it doesn’t seem to work on is the awards page!

    #962806
    Alex

    Sorry, saying that, it’s still displaying the fallback on all pages randomly

    #963048
    Tom
    Lead Developer
    Lead Developer

    The function is sending this to Google (no capitals): space+mono

    It should be Space+Mono instead, which this function does in the “Name” field: https://generatepress.com/forums/topic/site-displaying-fallback-font-sometimes/#post-962612

    Can you make sure it’s using capitals?

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