Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Graham Davidson
Courses Plus Student 14,966 PointsFont 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
15,645 PointsHi 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?
Tom Bedford
15,645 PointsHi 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?
Graham Davidson
Courses Plus Student 14,966 PointsGraham Davidson
Courses Plus Student 14,966 PointsHI 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