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
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?
