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 Stickley
3,958 PointsFont not displaying correctly in F/fox OR Chrome
Hi All,
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:-
As it SHOULD appear screengrab from FontSquirrel
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?
Yours Headscratchingly,
Mike
2 Answers
Michael Stickley
3,958 PointsCracked 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.
Mike
Zoltán Holik
3,401 PointsTry 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".
@font-face {
font-family: 'somefont';
src: url('../fonts/somefont.svg') format('svg');
...
...
...
}
Michael Stickley
3,958 PointsTried it via the earlier @font-face utilising workspace I had under the CSS Basics course with the Abolition font used there but no joy alas The A's and other slopes in the letters are jagged and messed up - I'm pretty sure this must be a problem to do with my local system.
Makes me wonder how many font designers out there are not getting their hard work fully appreciated by people with issues similar to mine!
Thanks for trying!
Michael Stickley
3,958 PointsMichael Stickley
3,958 PointsUpdate : tried updating graphics driver - no joy...
I've actually had this issue for a couple of months now but just kind of lived with it until now. I have read a few posts on other forums mentioning related problems with Windows updates but none seem to have fixed the issue or relevant to my OS.