Loading custom fonts (supporting that in the Designer UI)

Design help Custom code
1

Hi there,

I’ve been wrestling a little with a webflow hosted site over the last few days, attempting to get Google’s Page Insights score to somewhere reasonable; I don’t want to get into whether or not this affects SEO (which as it happens is my goal).

One major avenue I’ve been pursuing is better loading of our fonts. The current loading strategy is just to add these fonts via the Custom Fonts section. The issue I have here is webflow will not cache any of this (although I understand it will deliver them via CDN).

I decided to try out loading the fonts through Google Fonts (again using Webflows inbuilt feature). This helped a little, as the fonts are cached, but this resulted in two problems:

  1. Google Fonts loads a CSS file (which in turn loads the fonts) and it doesn’t allow much control over the CSS actually used to import the font, meaning I can’t take advantage of FOIT or FOUT to get content displaying as fast as possible

  2. Owing to the issue with (1), the names with which the fonts are imported are different to the names that were used when the fonts were uploaded as “Custom Fonts” (you can see the naming difference between this screenshot, and this screenshot), as such, all the “Font” drop downs within the Designer revert back to “None selected”, and I have to go through all of them and relink them back to the newly named (but same) font. All the text infact becomes unstyled across the app until this happens.

Finally, I decided to host my own fonts and font CSS, via a CDN, and include the CSS for this in the custom code header / footer section for the project. This definitely reaped the best rewards and best score especially on mobile. However, using this strategy, I still suffer from issue (2) above, BUT, I don’t even have a replacement font to link them back to; as Webflow doesn’t think that the font even exists.

My question is: How can I register a font-name with Webflow, so users can choose it within the Designer, without needing to upload that font either through Custom Fonts or the Google Fonts section?

Thanks for any help you can give

Hugh