- This topic is empty.
-
AuthorPosts
-
September 11, 2013 at 12:40 pm #149755McGuive7Participant
Hi there,
So we’re embedding a font using @font-face like so:
@font-face {
font-family: “You Are Loved”;
src: url(“fonts/You_Are_Loved.ttf”);
src: url(“fonts/You_Are_Loved.svg#YouAreLoved”) format(“svg”), url(“fonts/You_Are_Loved.eot?”) format(“eot”), url(“fonts/You_Are_Loved.woff”) format(“woff”);
font-weight: normal;
font-style: normal;
}Additionally, I’m using the following CSS for all elements:
* {
-webkit-font-smoothing: antialiased;
}The issue I’m running into is that the font renders fine in Chrome (only if using the -webkit-font-smoothing property), however it renders bolder in Firefox (Mac), becoming almost illegible. The font itself is “distressed” with some transparent areas – these areas render fine in Chrome, but seem to get partially filled in in Firefox.
I’ve made sure to set all font-weight rules to font-weight: normal, where necessary – but still no luck in Firefox.
Here is an image from Chrome: http://www.mightyminnow.com/wp-content/uploads/2013/09/chrome.png
Here is an image from Firefox: http://www.mightyminnow.com/wp-content/uploads/2013/09/firefox.png
And this is the actual page if you care to investigate: http://dev.rocketdogrescue.org/dog/kylie/Any help would be much appreciated – thanks!
– MickeySeptember 11, 2013 at 12:43 pm #149756Paulie_DMemberWhat is the source of the font?
Was it converted using a service etc?
September 11, 2013 at 1:02 pm #149759McGuive7ParticipantThis is where I got the @font-face package:
http://www.fonts2u.com/you-are-loved.fontThoughts?
September 11, 2013 at 1:09 pm #149760Paulie_DMemberOh…it’s a free font…well you pay for quality.
I do know that there are rendering differences between browsers when it comes to @font-face.
What specifically (If anything) will resolve it I’m not sure. Perhaps a little more searching for** FF specific** issues?
September 11, 2013 at 4:51 pm #149773arnolfoParticipantThere is a fix to this. This fixes the bolder text in Safari. May work in Firefox as well.
add this to your stylesheet’s body tag; I have mine in my “reset.css”
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;September 12, 2013 at 1:59 am #149786Paulie_DMemberThis made some good points too and may help:
http://webdesign.tutsplus.com/articles/typography-articles/a-web-designers-typographic-boilerplate/
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.