unable to add Font locally

Hi Ajay,

Is it only occurring for .ttf files?

If so, the code provided here allows you to include .ttf as a mime type when uploading to the media library.

If that's not working then there is some other security mod on your site that is blocking them.

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

If you want to upload it still, try accessing your wp-config.php file through FTP then add define('ALLOW_UNFILTERED_UPLOADS', true); inside the file. You should be able to upload it afterward.

how to add more things with font like [ system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ]

The first screenshot link you sent is "undefined". Can you reshare it for clarity?

Can you also explain a bit more what you want to achieve?

I want to add extra boldness in the font for the heading. Like other websites, they use some additional fields, eg.

FONT-FAMILY
ProximaNova, system-UI, -apple-system, "Segoe UI," Roboto, "Helvetica Neue," Arial, "Noto Sans," "Liberation Sans," sans-serif, "Apple Color Emoji," "Segoe UI Emoji," "Segoe UI Symbol," "Noto Color Emoji."

Those are just backup fonts. They don't define a font's boldness.

If you want to change the "boldness", you need to alter the font-weight value of the text. See font-weight here: https://docs.generatepress.com/article/dynamic-typography-overview/#font-weight

Can I use the default font option? Are they locally added? What does that mean also?

Yes, you can use these. Default/System fonts are locally available on every device. It's the best option performance-wise.

Basically, there are common fonts installed on every device. The set of default/system fonts available per device varies but there are common ones available like Arial.

When you choose System default as the font, it checks for what font is available on your local device and uses that based on the system stack.

As mentioned, since your fonts won't be loaded externally, and are already installed on your local device, Default systems fonts are best performance-wise.

David explains how it works here as well: https://generatepress.com/forums/topic/system-fonts-2/#post-1746966

Hi there,
here is how you would add the fonts locally (if you do not want to use the Systecm Stack): https://docs.generatepress.com/article/adding-local-fonts/#adding-our-font

Hey Fernando,

I was able to upload .ttf files after making that update to my wp-config.php (thanks for the tip). Unfortunately, I cannot see the permanent-marker font (used for my h6 headlines) on the front-end for just mobile devices (tested both android and ios). This permanent-marker font does work on Desktop and Tablet, and also while emulating a mobile device using the chrome inspector tool. It's worth noting... the other font I just started hosting locally (Aleo) does work on all device types (i.e. there's no issue with mobile).

I've followed all the Wiki/Video steps provided by GP, front to back, but can't seem to find the issue. Any chance I can get you to take a look? uprootedtraveler.com

Just in case you want/need to look at the backend, I've just sent a wp-admin PW reset to support@generatepress.com

Thanks in advance for your help.

Justin

Hi there,

when you see the font load on your desktop device but not on other devices, 9 times out of 10, your desktop device has the fonts loaded on it, and therefore the website uses those fonts.

When i inspect your site i see the following 404 errors related to fonts:

https://uprootedtraveler.com/wp-content/uploads/permanent-marker-v16-latin.zippermanent-marker-v16-latin-regular.woff2
https://uprootedtraveler.com/wp-content/uploads/permanent-marker-v16-latin.zippermanent-marker-v16-latin-regular.woff
https://uprootedtraveler.com/wp-content/uploads/permanent-marker-v16-latin.zippermanent-marker-v16-latin-regular.ttf
https://uprootedtraveler.com/wp-content/uploads/permanent-marker-v16-latin.zippermanent-marker-v16-latin-regular.svg#PermanentMarker

Check the exact file location of your font files, and make sure that your @font-face CSS URLs are the same.

David,

Thanks so much for the insight (sounds like I need to educate myself on finding 404 errors on my pages).

From looking at the recent support requests, I'm sure you're getting tired of all these font-related questions. There's a LOT of information out there about how google fonts slows our sites and is not GDPR-compliant, but I just reviewed this wiki on developers.google.com and they unambiguously state "Google does not log or store the IP addresses and immediately deletes them after transmitting the font to the requesting user."... and they later go on to state that "...there are also several drawbacks to self-hosting Google Fonts" including 1./ (potentially) larger file sizes and 2./ broswer compatibility, and 3./ needing to manually host fonts.

I wish there wasn't so much conflicting information out there, but I can't say I'm surprised.

Thanks again for your help.

Yeah - its a minefield trying to get a clear answer on most things relating to goole - which is kinda ironic lol.
I can only advise on what i have read eg. using Google APIs in some countries like Germany has resulted in company fines or lawsuits, so be mindful of your countries laws, and what i have observed. And in all my observations removing the font api from the equation has improved performance. Browser compatibility, you 99.9% covered if you include woff

https://caniuse.com/?search=woff

And woff2 for better compression.

Did you resolve the font issue ? I can see the marker font loading