Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS @font-face rendering issue – need help

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #149755
    McGuive7
    Participant

    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!
    – Mickey

    #149756
    Paulie_D
    Member

    What is the source of the font?

    Was it converted using a service etc?

    #149759
    McGuive7
    Participant

    This is where I got the @font-face package:
    http://www.fonts2u.com/you-are-loved.font

    Thoughts?

    #149760
    Paulie_D
    Member

    Oh…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?

    #149773
    arnolfo
    Participant

    There 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;

    #149786
    Paulie_D
    Member
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.