Local font won't display on mobile

Hi there,

Can you specify which text on the page are you pertaining to?

Also, can you share w/ us how you've imported the local font?

I've checked the site and I only saw this - https://share.getcloudapp.com/mXuKjL2v - which is strange as the CSS isn't properly syntaxed to be an inline CSS. I also don't see the site loading the actual font file - https://share.getcloudapp.com/OAunODoz - as it uses "Roboto" instead of cooper black on all fonts.

While the logo uses cooper black, that's because it's a rasterized image, meaning it doesn't need to load anything externally.

Hi, where are you seeing that? I don't see it in my style.css file.

The h1, h2, h3 and h4 are all cooper black. The h5, h6 & p are Roboto

To my knowledge, this is what I did:

-Purchased & Downloaded CooperBlackLT pro fonts in .tff .woff and .woff2

-Added the suggested piece of code from your documentation to allow me upload fonts to my media file

-Updated my font-family property in the Theme Editor

Because this didn't work, I also added the fonts manually through my cPanel file manager. I added it to public_html > wp-content > themes > generatepress-child > fonts

Hi, where are you seeing that? I don’t see it in my style.css file.

It's taken directly from google devtool inspection of your site's rendered HTML tags.

It shouldn't be added as a class selector as it's CSS. :D

Also, the content of the child theme's style.css needs correction as well. There's a PHP snippet in it.

This part:

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

Is a PHP snippet. Here's how to add PHP snippet - https://docs.generatepress.com/article/adding-php/

You basically add this as in your child theme's functions.php

You then change the @font-face to this:

@font-face {
    font-family: 'Cooper Black LT Pro';
    src: url('https://createthatcopy.com/wp-content/themes/generatepress-child/fonts/CooperBlackLTPro.woff2') format('woff2'),
        url('https://createthatcopy.com/wp-content/themes/generatepress-child/fonts/CooperBlackLTPro.woff') format('woff'),
        url('https://createthatcopy.com/wp-content/themes/generatepress-child/fonts/CooperBlackLTPro.ttf') format('ttf'); 
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

You then add this PHP snippet on your child theme's functions.php as well so you can use it on the customizer.

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Cooper Black LT Pro';

    return $fonts;
} );

Thanks for this. I have made the changes you've suggested. It did not change the fonts on my site though. A google font replaces the CooperBlack on mobile.

After applying all these can you try clearing cache? Your CDN is still serving an older version of the CSS.

it's still using 'CooperBlackLTPro' instead of 'Cooper Black LT Pro'

I cleared my cache and still see the wrong font. Can I manually remove the old CSS?

I cleared my cache and still see the wrong font. Can I manually remove the old CSS?

Yes, and only keep the ones I've provided on my reply here.

https://generatepress.com/forums/topic/local-font-wont-display-on-mobile/#post-1891399

Same applies for PHP snippets as well. Use the ones I've provided to avoid any issues. :D

Tip: Always clear cache changes are made to the site to make sure the latest modifications are served. :)

Hi. I deleted everything in the functions.php and style.css locations except what you gave me.

Then i cleared my cache. And my browser cache. On all my devices.

Still not seeing the right font. What am I doing wrong?

Check this testing - https://share.getcloudapp.com/yAuy4nXn - We can see here that the font is now actually loading properly on the site. We just need to apply it properly to the font. :)

Can you check on Appearance > Customize > Typography and check if the headings use Cooper Black LT Pro instead of CooperBlackLTPro?

And then clear the cache after applying. :D

Hi. I changed the fonts in customizer. & of course cleared cache, brower & server.

It still has made no difference on mobile. I'm getting very panicky because I was supposed to launch this today.

If you can get back to me during your local business hours that would be so great. I'm at my wits end and wondering if I need to change themes, because I really need this to be done already.

Thank you for all your help

Elvin, it's working! Thank you so much. You have been so patient with my ineptitude this week and I appreciate it.

Nice one. Glad you got it sorted. :D