[Support request] Adding Local Fonts

[Liron]

Hello GP Support,

I am trying to add a custom local font to my website (it is not google font).

I followed this article carefully, but it is not working correctly – https://docs.generatepress.com/article/adding-local-fonts/.

How can I do this?

Thank You

[Fernando]

Hi Liron,

Can you try adding woff and woff2 versions of the font to test?

A site like this should help you generate them: https://www.fontsquirrel.com/tools/webfont-generator

Try replacing the font-family name you set in the @font-face rules as well. Try setting it to cooper-std or cooperstd for instance.

[Sato Mori]

I have the same problem.

It said: “BeVietnamPro-Italic.ttf” has failed to upload.
Sorry, you are not allowed to upload this file type.”

I also add this code to Theme function file:

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

Pls help. Thanks

[Fernando]

Hi Sato Mori,

Try accessing your wp-config.php file through FTP then add define('ALLOW_UNFILTERED_UPLOADS', true); inside the file.

A simple solution is to NOT bother with the .ttf and just use .woff and .woff2 as they are supported by all modern browsers.

[Sato Mori]

I think all of font file did not work correctly

On dev tool, it said cant not found the font file @@

[Fernando]

Can you open a new topic so we can address your issue there? On this topic, we’d like to focus on Liron’s issue. Your issue might not be exactly the same as Liron’s.

[Sato Mori]

Yes sir, Im sorry.

[Liron]

I have uploaded the fonts in the child theme.

[David]

Hi there,

can you:

1. Move the CSS to the top of the Customizer > Additional CSS, so it is before any other CSS.

2. Change the font-family: 'Cooper STD'; to a word without spaces e.g font-family: 'Cooper';

3. In your Customizer > Typography

3.1 -> Font Manager, add: Cooper

3.2 -> Add Typography to a element and select your Cooper font

[Liron]

Hello David, That worked.

Thank You so much for your support. Appreciate it!

[David]

Glad to hear that!

[Liron]

Hey David,

Can you please check it? Why is the custom font not loading on mobile devices?

Thank You

[Ying]

I don’t see the font either on desktop or mobile, you are seeing it on desktop likely because you’ve installed the font locally on your desktop.

Can you show us the@font-face CSS you added? Please wrap the CSS code using the CODE tags so it keeps the correct format.

Let me know!

[Liron]

I can see the font when I am logged in.

[Liron]

Can this be a SiteGround cache and CDN Issue?

I disabled everything from the WordPress dashboard and siteground a week ago. But just for your information.

[Author]

Posts