[Resolved] Site displaying fallback font sometimes

[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

[Leo]

Hi there,

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

[Alex]

Hi Leo,

It happens across the whole site!

Thanks,

Alex

[Leo]

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?

[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;
}

[Tom]

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?

[Alex]

Hi Tom,

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

Thanks,

Alex

[Tom]

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?

[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');

[Tom]

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 🙂

[Alex]

Hi Tom,

So add that PHP as a new snippet?

[Tom]

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;
}

[Alex]

Thanks for that Tom,

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

[Alex]

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

[Tom]

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?

[Author]

Posts