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
Michael Stickley3,958 Points
Font not displaying correctly in F/fox OR Chrome
Bit of a puzzler for you all - but I'm sure someone on here must have the answer! :-)
Fonts on webpages are displaying in a very aliased / pixellated manner and do not appear as they do in eg images of the font to be found eg on Fontsquirrel
Now this is not specific to just this lesson using the Nunito font or even Treehouse in general as I get this on other websites : I've had an issue with some fonts displaying incorrectly in both Firefox and Chrome despite developer tools in Chrome & Firebug in Firefox both suggesting the font is applied and loaded correctly.
As I can't attach screenshots on here I've linked to uploaded screenshots on Google drive below:-
This is just plain weird as I can imagine how one browser might have a problem with displaying fonts but not two of them... - leads me to suspect it may be OS related (I'm on Win 7)??? Plenty of googling has led me to various issues that may affect one browser or the other but not both - and am not using a proxy server. The font displays fine on my Galaxy S4 using the same wifi connection. Oh, and I've tested Firefox in Safe Mode - same issue...
Any tips for what may be going on here or how I might further test the issue?
Michael Stickley3,958 Points
Cracked It! I shouldn't gloat though as it's all my fault....
I'm working on a fairly slow laptop (can't really complain - it's been borrowed off a very kindly soul!) and a couple of months ago I decided to try and optimise it's performance by turning off all unnecessary options and tuning it for performance.
It turns out that in windows 7 if you go via Control Panel->Performance Information And Tools-> Adjust Visual Effects and select Adjust for best performance it turns off a setting "Smooth Edges of screen fonts"
Re-enabling this, checking my ClearType settings and restarting windows has fixed it.
Can't believe I didn't associate this with when I had "tuned" my computer!
Still - it's always good to learn something new I guess! I hope this helps anyone else who has issues with fonts appearing jagged in all browsers.
Zoltán Holik3,401 Points
Try to load in css @font-face the SVG url first, and after the other like woff, ttf...etc. I solved the problem with this "FIX".
src: url('../fonts/somefont.svg') format('svg');