What are the best options for using the Google font Archivo with font-stretch properties in Webflow? How does Webflow import the variable version of Archivo and why can't changes be made to the type axes using custom code?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To use the Google font Archivo with font-stretch properties in Webflow, you have a few options. Here's what you can do:

Using Webflow's built-in font settings:

In the Webflow Designer, go to the Fonts panel in the Styles tab.
Click on the "+" button to add a new font.
Choose "Google Fonts" from the dropdown menu.
Type "Archivo" in the search bar and select the font style you want to use.
Once selected, the font will be imported automatically into your project.

Using Google Fonts API with custom code:

If you prefer to use custom code, you can import Archivo font directly from the Google Fonts API.
Go to the Google Fonts website (fonts.google.com) and search for "Archivo".
Select the font style and click on the "Embed" button.
Copy the provided code and paste it into the <head> section of your Webflow project. You can do this by going to Project Settings > Custom Code and pasting the code in the "Head Code" field.
After saving the changes, the Archivo font will be available for use in Webflow. You can select it from the typography settings for any element.

Now, let's address why changes cannot be made to the type axes of Archivo using custom code in Webflow:

Webflow's designer tool is not designed to support dynamic variable font properties directly through custom code. Here's why:

Custom code limitations:

While you can import the variable version of Archivo using custom code, making changes to the type axes like font-stretch requires advanced coding skills and careful handling of the CSS properties.
Webflow's designer tool does not expose the underlying CSS for variable font properties, making it difficult to modify them directly in the visual editor.

Compatibility with the design tool:

Webflow provides a comprehensive visual editor that allows users to easily customize website designs, including typography.
However, the web design tool is not currently built to support the customization of variable font properties.
This limitation ensures greater stability and consistent design control within the platform.

In conclusion, while you can import the Archivo font and use it in Webflow, modifying the type axes like font-stretch properties requires advanced coding skills and cannot be done directly through the platform's visual editor.

Additional questions:

How do I change the font style in Webflow using Google Fonts?
What are the benefits of using variable fonts in web design?
Can I use custom fonts in Webflow?

Is it possible to create a Webflow contact form that sends its contents to the admin's email address and also adds the user's email address to a Mailchimp list if a checkbox is checked?

Why do my custom checked states for radio buttons and checkboxes with SVG images work on desktop and Firefox, but not on an actual mobile device using Chrome?

How can I call a Webflow interaction using jQuery or JavaScript?

How can I fix the issue of my JavaScript code returning a NodeList(0) when trying to find a class in Webflow?

Why won't the heading text wrap when it reaches the end of its container in my Webflow project?

Is there a script that can be used to delay the display of the full list of jobs on a embedded page from greenhouse jobs until it is loaded properly in Webflow?

Why does Webflow ask to set the body element position to relative?

Can I disable the custom CSS code on mobile devices in Webflow?

Is there a way to fix the issue of needing to click the hamburger nav trigger twice to reopen the dropdown menu on Webflow?

What is the solution that the author has come up with to easily create TypeScript projects in a Visual Studio code environment and take advantage of advanced features?