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.

CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :first-child and :last-child

Michael Stickley
Michael Stickley
3,958 Points

Font 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:-

On Chrome

On Firefox

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

Michael Stickley
Michael Stickley
3,958 Points

Update : 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.

2 Answers

Michael Stickley
Michael Stickley
3,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.

Mike

Zoltán Holik
Zoltán Holik
3,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".

@font-face {
font-family: 'somefont';
src: url('../fonts/somefont.svg') format('svg');
...
...
...
}
Michael Stickley
Michael Stickley
3,958 Points

Tried 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!