Streaming live at 10am (PST)

How do I set fallback fonts for Adobe Typekit fonts?

Hey Webflow community,

I am in progress of building a site for a client and have linked up Adobe Typekit / Adobe Fonts for Halyard and Bressay Display. I wish to set fallback fonts – Roboto and Domine from Google Fonts however am unsure how to do this within Webflow.

Any help would be much appreciated.

Thanks!


1 Like

I would like to know as well, this will be handy. Better yet, Webflow should expand its fonts features on settings panel to include Fallback fonts for instances like this.

Go to a published project and inspect the code. Easy. You’ll notice that they provide a fallback list already.

font-family: Arial,‘Helvetica Neue’,Helvetica,sans-serif;

Thanks Jeff, I think what Miek and I were after is the ability to define these fallback fonts – either within the existing Webflow selection or additional fonts from Google Fonts – e.g. Roboto for body text and Playfair Display for Headings

Got your point. The browser default font selection is the fallback. That being said you, you can set your desired base font by styling the body in the designer, not a new class on the body element. I normally set my body font, then headings. Then I tune for different classes or elements. Want more that one font on the body? You could do this as custom code using a new CSS rule for body in the for example.

I think there are a lot of small things webflow does not expose, to protect users, I mean designers, from doing things that hurt the user experience. I would imagine that people would load up ten fonts and then complain about performance for example. I have no idea but after reading lots of forum posts I could see the point of restrictions.

Hey man, I just want external images without custom code!

Setting BODY font does not work on rollback fonts unfortunately after Jan 18. All my projects went from Sans / Sans-Serif rollback to Serif Times new roman after saving projects after January 18 as rollback even though my global body tag is defined as a sans or sans-serif font.

@miekwave - can you pm me an example published site?

Hi @webdev

This issue has been escalated in this thread: Fallback font only showing Times