How can I choose alternative fonts to be used if the desired fonts are not available on a particular device for my Webflow website?

Published on

September 22, 2023

Note

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

If you want to make sure that your website looks consistent and visually appealing across different devices, it's important to choose alternative fonts that can be used if the desired fonts are not available. Luckily, Webflow provides a built-in feature called "font fallback" that allows you to specify alternative fonts in case the primary fonts are not supported.

Here's how you can choose alternative fonts in Webflow:

Open your project in the Webflow Designer.
Go to the "Style" panel and select the element for which you want to choose alternative fonts.
In the typography section, click on the font name to open the font selection menu.
Webflow provides a wide range of fonts to choose from, categorized into different font stacks. Font stacks are groups of fonts that are similar in style and can be used as fallback options.
Select a font from the font stack that you like as the primary font for your element. This font will be used if it is available on the user's device.
To specify alternative fonts for devices that don't have the primary font, click on the "Choose fallback fonts" link below the font selection menu.
A modal will appear with a list of font stacks that you can choose from for fallback options. You can also add custom font stacks if you have specific fonts in mind.
Select the font stack that you prefer as the fallback option. Webflow will automatically generate the CSS code to apply the font stack to your element.
Repeat the process for other elements that you want to specify alternative fonts for.
Preview and test your website in different browsers and devices to ensure that the fonts fallback as expected.

By following these steps, you can ensure that your Webflow website gracefully adapts to different devices and operating systems, maintaining a consistent and visually appealing design across the board.

Additional Questions:

How can I add custom fonts to my Webflow website?
Can I use Google Fonts in Webflow?
Is it possible to use different fonts for different sections or elements of my website in Webflow?

What could be causing two specific images to keep disappearing on a website built with Webflow when the tab is closed and reopened in Chrome, and what is the workaround to fix it temporarily?

Can Webflow natively control the color of a brand/logo based on the background or a mask?

How can I embed a custom form that contains HTML, js, and CSS on my site in Webflow due to the 10,000 characters limit in the custom code?

Is it possible to combine 'javascript:delay('URL') with 'javascript:history.back()' in Webflow for creating an 'about' page with a page transition and a back button?

How can I fix the issue where the success message does not show up on mobile after a user subscribes through the email form component in the footer on Webflow?

Can a user who initiates the sign-up process on a restricted page be automatically directed back to that page upon verification in Webflow? Is it possible to send a user a specific email pertaining to the video they are watching once they have landed on the video page in Webflow?

How can I add Javascript to ensure consistent formatting of fields such as price, price per SQFT, phone number, and square footage on my event registration website in Webflow?

1.) Is it possible to have a master template for multiple Webflow sites?2.) How can changes made to the master template affect all of the sites?

How can I create a fixed sidebar with scrollable CMS powered projects and a selected state for the current project in Webflow?

Are you interested in a quoting solution using VueJS and Webflow, where the project remains entirely in Webflow and includes build and deploy commands?