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

CSS

Posted by Jeramy Dichiera
Jeramy Dichiera
3,507 Points

Issue with Google webfonts rendering

I'm going through the fonts and colors stage of the Web Design adventure, and I noticed that after I added the CSS to display the Google webfont on my page, the text became difficult to read. I tested the page in Firefox and Chrome and got the same result. Has anyone else experienced this? How did you resolve it?

This is what the text looks like with the Google webfont commented out: font a

And here is what it looks like when it is enabled: font b

And here is the code that I am using for the style sheet link

<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

CSS

body {
font-family:'Nunito', sans-serif;
}

2 Answers

Jeramy Dichiera
Jeramy Dichiera
3,507 Points

Thank you for the information guys. I was able to resolve my issue by enabling (and tuning) cleartype.

http://windows.microsoft.com/en-us/windows7/make-text-easier-to-read-using-cleartype

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's a known issue.

In most cases, it's an issue with font hinting.

Jon Wood
Jon Wood
9,884 Points

Hey James, I'm curious...would this be different across browsers or is it known across all of them?

James Barnett
James Barnett
39,199 Points

Mostly it's a Windows Chrome thing. Although I've heard it mentioned on other browsers.