Can font-display CSS feature be controlled through Webflow?

Published on

September 22, 2023

Note

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

Yes, font-display CSS feature can be controlled through Webflow. Webflow provides a user-friendly interface that allows you to easily adjust the font-display property for your fonts.

The font-display property controls how a font is displayed when it is being downloaded or is unavailable. It helps to provide a good user experience by ensuring that text remains visible, even when the fonts are still loading or if there are issues with font loading.

To control the font-display property in Webflow, follow these steps:

Select the element that you want to apply the font-display to, such as a heading or paragraph.
In the styles panel on the right-hand side, click on the "+" icon to add a new custom style.
In the custom styles panel, click on the "+" icon next to the "Typography" section to add a new typography style.
In the typography style settings, scroll down to find the "Advanced" section.
In the "Advanced" section, click on the "Add Property" button.
Type "font-display" in the property name field.
Select the desired value for the font-display property from the dropdown menu. The available options are auto, block, swap, fallback, and optional.
Save the changes.

By adjusting the font-display property in Webflow, you have control over how fonts are displayed and loaded on your website, ensuring a better experience for your users.

Optimized questions for search:

How can the font-display CSS feature be controlled in Webflow?
What are the steps to adjust the font-display property in Webflow?
Can Webflow be used to customize the font-display property for fonts?

How can I style the text that is typed into a form field in Webflow?

How can we change the font color of the selected item in a dropdown menu on our Webflow site?

In Webflow, why isn't the text color changing to white even though it shows that it is inheriting the color from a parent element?

How can I style 'All figure captions' in Webflow if I cannot find the element in the elements panel?

Is it possible to create a button that only becomes visible when scrolling past a certain section in Webflow's editor, and if not, is there a way to implement this using javascript and the Webflow.js API/libraries?

How do I get the font in bold even if the user hovers within the dot's container in Webflow?

Is Flex box causing issues with any web browser that is not up to date and in line with the latest technologies?What are the limit of Flex box if certain browser are unable to recognized the parameters?

What could be causing the issue of the image not being put behind the text and constantly flashing when hovering in Webflow?

How can I fix the issue where the transparent Navbar with a dropdown I'm building in Webflow is not pushing down the rest of the page content on mobile?

In Webflow, is there a workaround for the white lining around the edges of a blur effect on a landing page when hovering over columns?