CODEWITHSUNDEEP
cssfonts
yuvi
yuvi

Reputation: 18427

font-face on firefox causes trouble when using font-weight normal

I've run into an extremely weird bug. I have set up a custom font-face:

@font-face {
    font-family: 'MyAwesomeFont';
    src: '...';
    font-weight: 'normal;
}

@font-face {
    font-family: 'MyAwesomeFont';
    src: '...';
    font-weight: 'bold;
}

There's like 3 more, all with the same name but different font-weight (a bolder, 100 and 200). When using the normal one, Firefox uses the bold one instead - I mean, it doesn't tell me it uses the other one, but other browsers don't behave like that at all...

I tried using an arbitrary value instead of normal but that just screwed up things for other browsers. Any ideas what I should try to do?

update

I just used exact numbers for all the font-faces. I used 400 for the normal one, so technically it's the same. But now Firefox renders it correctly. I'm very unsure as to what exactly happened...

Upvotes: 0

Views: 142

Answers (2)

Bernard Skibinski
Bernard Skibinski

Reputation: 1

The problem is the "bolder" and "lighter" statement. Somehow @font-face doesn't play nice with those font-weight declaration.

I was playing around, trying to figure out why my regular font was bold all the time. The order of the font-face declaration also made a difference, but still it acted weird.

Then I replaced the "bolder" statement with a number "900", and suddenly everything worked as it should.

I didn't find any other blogs talking about this problem yet. This issue happens in Firefox, Chrome and at least IE11.

Although IE11 doesn't seem to play nice with the "lighter" statement.

So to be sure, just use numbers (100 to 900) or bold. not bolder or lighter

Upvotes: 0

Netsurfer
Netsurfer

Reputation: 5542

When using your "own" fonts, respectively make sure that a certain font is available you should follow certain things.

Firstly how to use @font-face:
Always use a number (100 - 900) for the font-weight and also define the font-style (most fonts have separate files for normal and italic (for different thickness = font-weight)

@font-face {
    font-family: 'MyAwesomeFont';
    src: '...';
    font-weight: 400; /* 'normal' equals to '400' */
    font-style: normal;
}

@font-face {
    font-family: 'MyAwesomeFont';
    src: '...';
    font-weight: 700; /* 'bold' depends on your available font files, normally it is equal to '700' */
    font-style: normal;
}

You'll find some further information about font-weight on this site: https://developer.mozilla.org/en/docs/Web/CSS/font-weight

If the desired font is not loaded, you can check the following points:

  1. Make sure that only the needed format (e.g. WOFF) is given in the source and use the developer tool of your browser to check if the file is loaded correctly and watch the preview (should show all available characters of the given font).
  2. The desired font must not be available/ installed on your test/ local system.
  3. If you have generated the font files using a "Font Generator" (like Font Squirrel's) re-do the process (because maybe the file was corrupted). If this doesn't help, try to find another source file (in most cases the TTF file of the font) and use this for generating the other formats. If this still doesn't solve your problem go and use another "Font Generator".

Also ensure that all used characters are in the subset of your font file(s).

If you still encounter any problems come here again and let us know. ;-)

Good luck and success!

Upvotes: 1

Related Questions