Can font-display CSS feature be controlled through Webflow?
Published on
September 22, 2023
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 areauto
,block
,swap
,fallback
, andoptional
. - 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?