Site displaying fallback font sometimes

Hi there,

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

Hi Leo,

It happens across the whole site!

Thanks,

Alex

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?

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

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?

Hi Tom,

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

Thanks,

Alex

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?

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

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 :)

Hi Tom,

So add that PHP as a new snippet?

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

Thanks for that Tom,

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

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

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?