Adaptable fonts

Historically, font heaviness and styles were segregated into distinct font files, necessitating designers to upload separate files for each style — up to now. Through adaptable fonts, all variants of a singular font are consolidated into 1 file, enhancing site performance and enabling designers to personalize font styles with increased authority and adaptability.

Within this instructional session, you will understand:

1. The concept of adaptable fonts 
2. Utilizing adaptable fonts and font modifications
3. Generating animated transitions using font variations
4. Developing interactions with font modifications 
5. Frequently asked questions and solutions

The concept of adaptable fonts 

An adaptable font is a font that encompasses the complete font family (e.g., Open Sans, Roboto Flex, etc.), not solely one style or instance. Previously, designers necessitated multiple font files for accessing various font weights (e.g., Light 100, Bold 700, etc.), a method that only permits limited granularity in designs and might impair site performance. Adaptable fonts encompass all weights within a font family’s range, allowing designers to tailor font styles with increased intricacy and precision. 

Quick tip: You can locate adaptable fonts through platforms such as Google Fonts, V-Fonts, and Fontesk. 

Furthermore, adaptable fonts offer controls along multiple axes (i.e., font properties) that were previously inaccessible to designers. There are 5 usual axes that oversee recognized, foreseeable attributes of a font — heaviness, breadth, optical size, slant, and italics — yet adaptable fonts can also contain personalized axes that dictate other design elements of the font selected by the type designer — for instance, the font’s softness, the thinness of stroke weights, the height of ascenders, etc. 

Utilizing adaptable fonts and font variations

Prior to commencing: Ensure you have earlier uploaded a bespoke adaptable font in Site settings > Fonts tab. Locating adaptable fonts is feasible through platforms like Google Fonts, V-Fonts, and Fontesk. Learn more about uploading custom fonts. 

Crucial: Webflow sustains adaptable fonts in TTF, OTF, WOFF, and WOFF2 formats. EOT and SVG formats are not supported. 

To employ an adaptable font and compose font variations: 

1. Choose the typography component (e.g., heading, text link, etc.) you wish to stylize on the Designer canvas
2. Navigate to the Style panel > Typography > Font dropdown and designate your adaptable font from Custom fonts 
3. Click the text box next to Variations to reveal the font variation menu
4. Adjust your preferred font variation(s) (e.g., heaviness, breadth, etc.) by shifting the sliders or manually entering values alongside each variation

Identifying adaptable fonts swiftly is feasible by recognizing the “dot” that emerges alongside them in the font picker. Additional details on the number of variations they support are viewable directly from the font picker by hovering over the “dot.”

Keep in mind: If you set a font heaviness in Style panel > Typography section and subsequently add a font variation on the heaviness axis, the font variation will supersede the previously designated font heaviness. 

Crucial: If you adjust a font variant and switch to another font, any font modifications previously made on the original font will be erased.

Helpful hint: You can define distinct font variants across diverse media queries (“breakpoints”) or on superior elements to implement the font variance to all offspring text elements. Like other typography characteristics (e.g., font family, font size, color, etc.), font variants are an inheritable attribute.

You can remove font variants by initiating the font variant menu, hovering over the variant you wish to eliminate (e.g., heft, wideness, etc.), and hitting the “trash” icon.

How to establish animated transitions with font variants

You can also design font variants for diverse element situations (e.g., float over, focused, etc.) and compose lively transitions amid the basic situation (“none”) and substitute situations.

Reminder: Exercise caution regarding accessibility while designing your animated transitions and avoid abrupt, unforeseen, or immoderate movements. Delve into further details about utilizing considerate movement and animation.

To develop font variants for a certain situation:

1. Point out the element you wish to format
2. Open the Style panel > Selector field
3. Impart your element a genre or select its HTML tag, if there is no class or tag already applied
4. Click the downward-pointing arrow to unfold the States dropdown and pick the situation you desire to design (e.g., hover, pressed, focused, etc.)
5. Navigate to Style panel > Typography and choose your variable font (if the font has not been previously set for the selected element, or if you want the complete font family to alter in the selected situation)
6. Press the textbox next to Variants to unveil the font variant menu
7. Select your favored font alteration(s) (e.g., heft, width, etc.) by sliding the controllers or manually typing values beside each modifier

Reminder: You will be unable to access the Situations dropdown if no class or HTML tag is allocated to your selected element.

Next, you may wish to devise an animated transition for the shift between the basic state and the alternate state. To formulate an animated transition:

1. Follow the aforementioned steps to create a font variant for an alternate state
2. Expand the Style panel > Selector field
3. Tap the downward-pointing arrow to unveil the Situations dropdown and pick “none”
4. Head to Style panel > Effects and hit the “plus” icon adjacent to Transitions
5. Incorporate any transition effects you desire (e.g., font color, font variations, etc.)
6. Specifiy the Duration of your transition effect
7. Tap the “Open easing editor” icon to personalize the Easing, if desired

How to produce interactions with font variations

Interactions also endorse variable fonts, permitting you to formulate distinct animations with font variants.

Reminder: Be thoughtful regarding accessibility while formulating your animations and bypass sudden, abrupt, or excessive movements. Discover more about employing deliberate movement and animation.

To fabricate an interaction with font variations:

1. Initiate the Interactions panel
2. Click the “plus” icon to append an Element trigger (e.g., mouse hover, scroll into view, etc.) or Page trigger (e.g., page load, page scrolled, etc.)
3. Unfold the Action dropdown from the commencing action segment (i.e., if you opted for the mouse hover element trigger, you would unfold the Action dropdown from the On hover segment)
4. Select an animation under Custom animation
5. Fashion your customized animation and opt for Font variation under theProcedures section > Look up Format variation section
6. Navigate to the Typeface variation and select the box adjacent to Variants to reveal the typeface variation settings
7. Adjust the preferred typeface adjustments (e.g., heaviness, broadness, etc.) by moving the controls or inputting values beside each variation

FAQ and problem-solving hints 

Where can I locate adaptable typefaces for my designs? 

You can discover adaptive typefaces through platforms like Google Fonts, V-Fonts, and Fontesk.

Which font file formats are compatible with adaptable typefaces? 

Webflow accommodates adaptable typefaces in TTF, OTF, WOFF, and WOFF2 formats. EOT and SVG formats are not supported. 

What is the maximum size allowed for customized fonts? 

You can upload fonts with a maximum file size of 4MB per file.

I previously uploaded a flexible font before this function was introduced, and I can’t append a variation. How can I include a typeface variation? 

Proceed to Site settings > Fonts tab, erase the adaptable font, and re-upload the adaptable font file. Following that, you should be capable of adding typeface variations when you access your site in the Designer! 

I selected an adaptable font via the Google Fonts or Adobe Fonts integration, but typeface variations aren’t accessible. How can I add typeface variations? 

Typeface variations are not accessible for usage through the Google Fonts or Adobe Fonts integrations currently. You can download or procure fonts from font integrations and upload them as custom fonts in Site settings > Fonts tab to leverage typeface variations. Find out more about custom fonts.

I uploaded an adaptable font before the font was upgraded with fresh typeface variation axes. How can I add typeface variations on the new axes?

You will need to re-upload the font to utilize the new typeface variation axes. Head to Site settings > Fonts tab, delete the adaptable font, and re-upload the adaptable font file.

Why are some of the axes labels not displaying as anticipated? 

The labels of the typeface variation axes shown in the Designer are contingent on the adaptable font file that was uploaded. In cases where the type designer of the adaptable font does not include a human-friendly label, Webflow defaults to the axis tag.

How are typeface variations ordered? Can multiple typeface variations share the same axis? 

Typeface variations can possess numerous modifications on the same axis, as this practice complies with the CSS specification. The axis that is lowest in the hierarchy takes precedence in the applied CSS. For instance, if you’ve devised the subsequent typeface variations: 

Slant: 0

Heaviness: 146

Breadth: 300

Optical size: 18

Heaviness: 1000 

The final “heaviness” applied to your typeface is 1000. 

What distinguishes the “slant” from the “italic” axes? 

Although the italic and slant axes are closely linked, the slant axis manages the font file’s slant property for oblique or upright styles, while italics exhibit a framework distinct from oblique styles influenced by cursive script. Learn more about the slant axis.