Variable Fonts: Google Fonts

Design help Custom code
1

Haven’t found this on the forums, so I thought I’d start a new thread.

I need to do something quite simple for a client but their design has the Google font Archivo (variable) with the font-stretch property set to 110% throughout the typography. I should ideally be able to apply body {font-stretch: 110%;} and it should work.

However, the default version that webflow imports using the font settings does not seem to support font-stretch properties. I have tried uploading the variable font separately. This seems to work but is an absolute pain while working in the Designer view. Can’t preview anything unless I setup massive amounts of custom code on every single page.

Here’s what I need to know:

  1. What is my best option here? Bite the bullet and just write custom code or upload a semi-extended version of Archivo (static) with the weights I need?
  2. How does Webflow import a Google Font like Archivo? Does it grab the variable copy?
  3. If the imported version of Archivo is indeed variable, why am I not able to change any of the type axes using font-stretch or font-weight properties in custom code?

Any help would be much appreciated :slight_smile:

2

Hi @akshay.khurana,

the easiest solution would probably be to upload the font with the desired width and simply select it where necessary. This depends on the number of instances the font would need to be replaced with, of course.

I just tested it with Montserrat, Webflow seems to grab a variable version from Google Fonts. However I couldn’t get the property to work locally either, so there might be something up with the parameter itself.

You should be able to change the font weight though, if that doesn’t work there’s something else not set up correctly, I’d assume.

If you need something to preview it and would be fine with exchanging the font via custom code, you could set the spacing of the preview to match the extended variant it gets replaced by. If you match the spacing to it, the space taken up by the font should be the same as after publishing. Just remember to remove the spacing via custom code again :smiley:

Hope this helped a bit, it’s a difficult case :slight_smile:

Cheers
Leon