Adding Local Fonts – GeneratePress

This topic has 15 replies, 5 voices, and was last updated 3 years, 3 months ago by Ying.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
January 26, 2023 at 12:11 am #2509418

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

January 26, 2023 at 12:17 am #2509427

Fernando
Customer Support

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.

January 26, 2023 at 12:53 am #2509444
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
January 26, 2023 at 1:12 am #2509455

Fernando
Customer Support

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.

January 26, 2023 at 1:34 am #2509469

Sato Mori

I think all of font file did not work correctly

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

January 26, 2023 at 1:38 am #2509477

Fernando
Customer Support

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.

January 26, 2023 at 1:39 am #2509479

Sato Mori

Yes sir, Im sorry.

January 28, 2023 at 2:09 am #2511787

Liron

I have uploaded the fonts in the child theme.

January 28, 2023 at 4:46 am #2511871

David
Staff
Customer Support

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

January 29, 2023 at 8:38 am #2513140

Liron

Hello David, That worked.

Thank You so much for your support. Appreciate it!

January 30, 2023 at 3:02 am #2513854

David
Staff
Customer Support

Glad to hear that!

January 30, 2023 at 10:52 am #2514511

Liron

Hey David,

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

Thank You

January 30, 2023 at 12:18 pm #2514597

Ying
Staff
Customer Support

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!

February 1, 2023 at 10:12 am #2517362

Liron

I can see the font when I am logged in.

February 1, 2023 at 10:17 am #2517367

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