Hey there,
I read the documentation but I don’t really understand how fonts work and I wanted to ask a question here.
Currently (out of the box) TagDiv works with Google Web Fonts. In my Page Speed Test that causes some layout shifts and sometimes they are slow to download.
Therefore, I want to use static fonts or whatever they are called. I like the fonts that are chosen by default from the theme and I found their download links from the documentation from the theme.
My question is – when I download one of them there are two files in the main directory – OpenSans-VariableFont_wdth,wght and OpenSans-Italic-VariableFont_wdth,wght (I can convert them to Woff with the specified tool in the documentation) but also there is a folder named static with 20 other files. Which of these files should I upload to the TagDiv fonts menu? In the menu there are fields named CUSTOM FONT FILE 1 and CUSTOM FONT FAMILY 1. What is a font file, what is a font family?
Sorry for asking this but I just don’t want to break things.
Please help!
Hi petar777,
Now there is a different solution that can be used. You can use google fonts and use the OMGF plugin and this will resolve the google fonts problem.
The old solution was to disable the google fonts – https://i.imgur.com/Im8CpNn.png and get a few woof fonts and load them in the theme panel – https://i.imgur.com/FpUk5Wu.png(even the default fonts are loaded from google fonts).
My suggestion is to try the font plugin this should resolve your problem with fonts and you can use the fonts you want.
Thank you!
But they will still be downloaded right? Isn’t it better to have them on my server and serve them like that?
Can you please guide me (step by step) how I can change from using the google fonts and downloading them to uploading them and setting them on my pages?
Using the mentioned plugin will be the best option with the best results and with the less work needed.
“Can you please guide me (step by step) how I can change from using the google fonts and downloading them to uploading them and setting them on my pages?” – for this you need to get the .woof fonts you want to use and upload it to the theme panel – https://imgur.com/FpUk5Wu after that will be display in ad fonts – https://i.imgur.com/DXALg55.png – https://forum.tagdiv.com/newsmag-using-custom-fonts/
Using the mentioned plugin will be the best option with the best results and with the less work needed. –> will it still download them or they would be served from my server with that plugin?
“for this you need to get the .woof fonts you want to use and upload it to the theme panel – https://imgur.com/FpUk5Wu after that will be display in ad fonts – https://i.imgur.com/DXALg55.png – https://forum.tagdiv.com/newsmag-using-custom-fonts/” –> I downloaded them but I am asking you a specific question which you didnt answer so I will just copy and paste it below:
My question is – when I download one of them there are two files in the main directory – OpenSans-VariableFont_wdth,wght and OpenSans-Italic-VariableFont_wdth,wght (I can convert them to Woff with the specified tool in the documentation) but also there is a folder named static with 20 other files. Which of these files should I upload to the TagDiv fonts menu? In the menu there are fields named CUSTOM FONT FILE 1 and CUSTOM FONT FAMILY 1. What is a font file, what is a font family?
Please answer my questions 1. will they be still downloaded if I use OMGF plugin and the other question below that.
The OMGF plugin will downloading google fonts you are using to your server and serving them locally instead of loading them from Google’s servers. This approach improves performance and privacy by reducing external requests and ensuring the fonts are served from your own server.
“My question is – when I download one of them there are two files in the main directory – OpenSans-VariableFont_wdth,wght and OpenSans-Italic-VariableFont_wdth,wght (I can convert them to Woff with the specified tool in the documentation) but also there is a folder named static with 20 other files. Which of these files should I upload to the TagDiv fonts menu? In the menu there are fields named CUSTOM FONT FILE 1 and CUSTOM FONT FAMILY 1. What is a font file, what is a font family?”
This depends on the font you want to use. Fonts typically range in weight from 100 to 900, and in addition to that, there are italic versions and various combinations of these styles. That’s why there are so many font files. To optimize your site, you only need to upload the specific font weights and styles you plan to use in the theme
I want to make an exact copy of the fonts that come with the theme by default, so what weights should I choose? Can you be a little bit specific when it comes to a question? When I download a font from google (you got the links to the fonts in the theme) I find 2 variable font files and in a folder named static I get another 20 files, which of these files should I upload? As far as I understand a variable font contains all the needed styles in one file, does your theme support that? If it doesn’t should I just upload the static files? When I tried to convert the static files to woff it gave an error? Can you please answer with a little bit of thought?
Some education:
https://www.coralnodes.com/host-google-fonts-locally/
Hi petar777,
I’ve tried to explain the best solution for using fonts, but if that doesn’t fully address your needs, I’m happy to answer each of your questions regarding the default fonts in more detail.
“I want to make an exact copy of the fonts that come with the theme by default, so what weights should I choose?”
The default fonts used in the theme are Roboto and Open Sans, as you correctly mentioned. However, when you install a demo (pre-built website), the theme often uses other Google fonts, and the font weights vary based on the demo. Typically, font weights range from 400 to 900 for normal styles and from 400 to 600 for italics.
If a specific font weight (e.g., 700) isn’t loaded, it’s not a major issue— the theme will automatically load the closest available weight that has been update in the theme panel (e.g. 500 regular, this should not be missing from the site, being the most used ).
As for the types of fonts supported by our theme: only static .woff fonts are allowed (not .woff2 or .ttf). This means you’ll need to upload one .woff file for each font style you want to use.
I hope these answers clarify things for you!
