Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

Font Section - what provider to use

I am messing about with different type providers - we have a subscription to Typekit. But am I correct in thinking that if a user has disabled JavaScript does that mean it will not work. If I have complete control over what font to use is better to use something that I can embed with @font-face and are Google Fonts just the clip art (ie we dont want to pay for fonts) equivalent of type.

2 Answers

Tom Bedford
Tom Bedford
15,645 Points

Hi Graham,

Typekit does require JavaScript so it wouldn't be suitable if you know a lot of your users won't have it enabled.

I have found many fonts on Google Fonts do not display well across various browsers/devices. Chrome for Windows seems to display lots of fonts poorly. I'm sure there are some decent ones up there somewhere.

I've used Typekit on several sites, picking fallback system fonts for users that don't have JS enabled/available. I'm happy with this approach for general page text. I find the browser rendering previews that Typkit gives are very accurate and help out when deciding on which font to use.

If it's something extremely important to the design you could have a picture fallback (e.g. using Modernizr and a .no-js class to hide the text then add a background-image on the containing element to replace it), though this would not be suitable for large areas of text. This could lead to problems with accessibility depending on the implementation (I try to avoid text in images where possible).

You could also use the .no-js class to change font sizes between the Typekit and fallback fonts to make sure they take up a similar space. There can be a significant difference between fonts even when set at the same font-size.

I haven't used any providers outside of Google and Typekit yet, perhaps someone else can add something?

HI Tom

Wise words indeed - yes I have been noticing the variations when using Google Fonts and I am keen to get some consistency rocking across the sites I build moving forward.

Very much loving your approach to fallback solutions and something I need to be more mindful of developing.

Thanks for the reply

G

Tom Bedford
Tom Bedford
15,645 Points

Hi Graham,

Typekit does require JavaScript so it wouldn't be suitable if you know a lot of your users won't have it enabled.

I have found many fonts on Google Fonts do not display well across various browsers/devices. Chrome for Windows seems to display lots of fonts poorly. I'm sure there are some decent ones up there somewhere.

I've used Typekit on several sites, picking fallback system fonts for users that don't have JS enabled/available. I'm happy with this approach for general page text. I find the browser rendering previews that Typkit gives are very accurate and help out when deciding on which font to use.

If it's something extremely important to the design you could have a picture fallback (e.g. using Modernizr and a .no-js class to hide the text then add a background-image on the containing element to replace it), though this would not be suitable for large areas of text. This could lead to problems with accessibility depending on the implementation (I try to avoid text in images where possible).

You could also use the .no-js class to change font sizes between the Typekit and fallback fonts to make sure they take up a similar space. There can be a significant difference between fonts even when set at the same font-size.

I haven't used any providers outside of Google and Typekit yet, perhaps someone else can add something?