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 Laura Cressman
Laura Cressman
12,548 Points

Icon Fonts and Reset.css

Hi everyone, So I switched from using normalize.css to reset.css for the site I'm working on, and my icon fonts that were so beautifully rendered that they belonged in an art museum when using normalize.css suddenly became blurry when I linked to reset.css. Why might that be, and how could I fix this? Thank you friends, Laura

3 Answers

Steve McKinney
Steve McKinney
29,274 Points

That's helpful, my next guess is probably faux bold being applied to the icons. If you set font-weight: normal on your icons to at least test for this and hopefully that will fix it.

The next step I would try is to remove line by line the code in normalize.css and see what piece of code makes the icons lose their niceness.

Laura Cressman
Laura Cressman
12,548 Points

Will do-I'll let you know if it works! Gotta love that debugging process :)

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

It sounds like you need to set the font size for what it's optimized for.

You can also get better results with:

-webkit-font-smoothing: antialiased;
Laura Cressman
Laura Cressman
12,548 Points

I actually did the antialiased smoothing, and didn't change the font size. For some reason, when I applied reset.css instead of normalize.css, it just went from looking great to blurry.

Steve McKinney
Steve McKinney
29,274 Points
Steve McKinney
Steve McKinney
29,274 Points

It would be good to see the contents of reset.css and maybe other CSS files. The only thing that comes to mind is, you may have somewhere in your CSS text-rendering: optimizespeed this may affect the way they look. Other than that have you changed browser or operating system? This will affect the way they look, also firefox did or still does really impact the way fonts render.

Laura Cressman
Laura Cressman
12,548 Points

Hi Steve, The reset file can be found here: http://meyerweb.com/eric/tools/css/reset/reset.css Perhaps there was something in the normalize.css file that was taking care of the icon fonts to make them look pretty, and by taking it out I messed up the fonts again. As for the other CSS file, it is rather long but I would be happy to send it to you via e-mail. I don't think I have that text-rendering property is on, but I will double check. Also, I did not change my brewer or anything else so I thought it was weird that the IcoMoon icons were suddenly being rendered all blurry. Thank you for taking the time to answer me, I really appreciate it! Thanks, Laura