Custom font handling

Community resources General
1

When uploading a custom fonts, the recommendation reads:

“You can upload any web fonts and they will be added to the font family list. For maximum browser support upload TTF, OTF, EOT and WOFF.”

If I upload multiple file formats of the same font, are they all downloaded by the user unnecessarily? Or, is only the first compatible file downloaded such that there is no downside to providing as many font file formats as possible?

It seems based on caniuse.com that a single WOFF file is sufficient (as opposed to also including an OTF and EOT - I only hav these three file types).

2
1 Like
3

Hey thanks Stan. I had been looking for the font upload in the html (since that is where I found the google font that I’m using) instead of css (where the custom uploaded fonts are loaded).

If I can ask another question, I assume using a google font through the google font api provides better performance compared to downloading the google font and then uploading it to Webflow. Is this accurate?

If I am already using a custom upload font not available on google, does that mean its better to then also load the google font in this way?

4

hi @SavvyJack I can’t tell as I never measured it. I had no interest as I never use google fonts from their website because they sending back to Google information about user when website is activated in browser. In any projects I always upload any fonts into folder. If you are in EU you should not use Google Fonts links as due these reasons you or your client will be breaking GDPR .

1 Like
5

Okay thank you. I’m in the US, but perhaps thats still better for me as well.

1 Like
6

Only when the user has already downloaded the font file in the local browser cache. Opening up a new connection to a different host usually takes more time than a file served from a resource you are already connected to. You could certainly test this with browser dev tools (no cache).

2 Likes
7

I appreciate your time @webdev . As always! … If I can ask one more question, do you know if I make the change from a google font to a custom uploaded font, will all the classes set to that original google font need to be reset to the new font? Or, if I make the name identical (and perhaps upload the new font before removing the google font?) will the font assignments remain intact?

8

@SavvyJack - Those are good questions that I can’t answer without testing which is what I suggest you do on a temp project.

1 Like
9

ah right. good idea. I’ll report back when I do.

10

Yes, it did maintain class font settings so long as the font name is exactly the same including capitalization. All font settings - weight/size/height/color - were preserved. This worked whether I uploaded the new font prior to deleting the google font or vice-versa.

It also worked when starting with a custom uploaded font and switching to the google font version. When deleting the google font prior to uploading the new font, the class font assignment is set to “select.”

Additionally, as you’d probably expect, you can upload a file for a different font, but give it the name of the previous font, and your classes will have this new font. However, the name is of course wrong.

2 Likes
11

When you upload multiple file formats of the same font, only the first compatible file will be downloaded by the user’s browser. The browser will try to find the best supported format from the list of font formats provided.

The order in which you upload the font file formats matters because the browser will attempt to download the font in the order specified. Once a compatible format is found, the browser will stop downloading the other formats. Therefore, it’s recommended to list the font formats in the order of their browser support, starting with the most widely supported format.