Firefox fonts are too chunky
Here's an example of Firefox's font display
And here's Chrome's and every other browser's display
I tried tampering with the font-weight in the css but nothing. Also I tried changing font size in browser preferences, still notta.
It's not code specific. It's all the text. Header, body, navigation.
This doesn't happen on other sites for me, so we need something to work with.
Originally Posted by
I think it has to do with @font-face
I always declare font-weight: normal and font-style: normal in my @font-face declarations. I'm not sure if that has anything to do with leveling the playing field between browsers or not:
font-family: 'Avenir Heavy';
src: url(fonts/avenir-heavy.eot); /* IE9 & compatibility modes */
src: url(fonts/avenir-heavy.eot?) format('eot'), /* IE6-8 */
url(fonts/avenir-heavy.woff) format('woff'), /* Firefox, Opera */
url(fonts/avenir-heavy.ttf) format('opentype'), /* Chrome */
url(fonts/avenir-heavy.svg) format('svg'); /* Safari */
I've switched careers...
I'm NO LONGER a scientist,
but now a web developer...
And you don't notice any difference cross browsers on like chrome?
I don't think we have enough information to diagnose the issue. If you can post a sample online or attach one to a post here, then we can 1) verify, and 2) troubleshoot. But if all we get is a screenshot, then all we can do is speculate.
Looks like the difference is how the two browsers apply bold. You have two options to fix this. You could set your H2's font-weight to normal. Or, in your @font-face declaration, you could set the font-weight to bold.
It's also applied to the text on 'recent tweets' in the menu
Yup that solved it. God damn, I cannot thank you enough. This issue has plagued me for over a year now
Users Browsing this Thread
There are currently 1 users browsing this thread.
(0 members and 1 guests)
Tags for this Thread