Grow your CSS skills. Land your dream job.

Font face question

  • # October 18, 2012 at 1:08 pm

    Hey everyone. I recently came across this piece of code, I believe it’s wrong — but I want to make sure I understand it correctly. Here it goes:

    @font-face {
    font-family: 'Adobe Clean';
    src: url('../Fonts/AdobeClean-Regular.eot');
    src: url('../Fonts/AdobeClean-Regular.eot?#iefix') format('embedded-opentype'), url('../Fonts/AdobeClean-Regular.woff') format('woff'), url('../Fonts/AdobeClean-Regular.otf') format("opentype"), url('../Fonts/AdobeClean-Regular.ttf') format('truetype'), url('../Fonts/AdobeClean-Regular#adobe_cleanbold') format('svg');
    font-weight: 400;
    font-style: normal;
    }

    @font-face {
    font-family: 'Adobe Clean';
    src: url('../Fonts/AdobeClean-Bold.eot');
    src: url('../Fonts/AdobeClean-Bold.eot?#iefix') format('embedded-opentype'), url('../Fonts/AdobeClean-Bold.woff') format('woff'), url('../Fonts/AdobeClean-Bold.otf') format("opentype"), url('../Fonts/AdobeClean-Bold.ttf') format('truetype'), url('../Fonts/AdobeClean-Bold.svg#adobe_cleanbold') format('svg');
    font-weight: 700;
    font-style: normal;
    }

    @font-face {
    font-family: 'Adobe Clean';
    src: url('../Fonts/AdobeClean-It.eot');
    src: url('../Fonts/AdobeClean-It.eot?#iefix') format('embedded-opentype'), url('../Fonts/AdobeClean-It.woff') format('woff'), url('../Fonts/AdobeClean-It.otf') format("opentype"), url('../Fonts/AdobeClean-It.ttf') format('truetype'), url('../Fonts/AdobeClean-It.svg#adobe_cleanitalic') format('svg');
    font-weight: 400;
    font-style: italic;
    }

    @font-face {
    font-family: 'Adobe Clean';
    src: url('../Fonts/AdobeClean-BoldIt.eot');
    src: url('../Fonts/AdobeClean-BoldIt.eot?#iefix') format('embedded-opentype'), url('../Fonts/AdobeClean-BoldIt.woff') format('woff'), url('../Fonts/AdobeClean-BoldIt.otf') format("opentype"), url('../Fonts/AdobeClean-BoldIt.ttf') format('truetype'), url('../Fonts/AdobeClean-BoldIt.svg#adobe_cleanbold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
    }

    You can see that there are four declarations of fonts. One's regular, one's bold, one's italic, and one's bold/italic. However, they all have the same value for font-family: "Adobe Clean".

    I was under the impression that that needs to be a unique name, cause now when any element is given font-family: "Adobe Clean", there are four font styles to choose from (I assume that the last one will be used).

    So my question is, am I correct? Or is the code above actually fine? Reason I'm asking is because someone else (not a newbie, quite an expert) claims it's correct so I'm seriously doubting my own understanding of this.

    # October 18, 2012 at 1:14 pm

    Interesting. I’ve always declared them separately, but this looks like it makes much more sense if it actually works. Isn’t that easy to test?

    # October 18, 2012 at 1:40 pm

    You know, I tried testing it, and I’m getting really unpredictable results. I’ll set up a test case so I can show what the issue is.

    @TheDoc: how COULD it work? How would you call, for example, the third “Adobe Clean” one?

    # October 18, 2012 at 1:48 pm

    rename the eot files?? Like Adobe Clean 1 and 2 and so on?

    # October 18, 2012 at 1:51 pm

    The filenames are already unique, that’s not the problem.

    # October 18, 2012 at 1:51 pm

    In a perfect world, the browser would be smart enough to look for the font-face declared as `font-style: italic` when using ``.

    # October 18, 2012 at 2:13 pm

    Indeed, it turns out that’s exactly what it does. All four font styles (regular, italics, bold, and bold italics) have the same name, but when the text in the markup is wrapped in `` tags, it will take the second one. When the text in the markup is wrapped in ``, it will take the third one. And then when both tags are used, it will take the fourth one.

    Right….? :)

    # October 18, 2012 at 2:47 pm

    That’s awesome!

    Quick side note: instead of wrapping stuff in `` you can just wrap it in a backtick `. This will enable you to show off code inline.

    # October 18, 2012 at 2:59 pm

    You should also do a test case in CSS.

    Example

    h1 {
    font: italic bold “Adobe Clean”;
    }

    # October 18, 2012 at 11:04 pm

    I believe that is correct, it can be used with four different declarations for different styles. See here: https://developer.mozilla.org/en-US/docs/CSS/@font-face (note that the support tabel is waaay out-of-date on that page).

    # October 19, 2012 at 9:04 am

    This looks like a good candidate for a mixin then!

    # October 19, 2012 at 10:07 am

    I’ve been doing this quite a while with Font-Faces and it works fine.

    What you’re effectively doing is providing multiple versions of the font but with different weight/style parameters.

    For example, if p/h tags are set to use this font, then you choose, font-style: italic; it will select the version that has “italic” font-style. Similarly for font-weight. You don’t need to explicitly select one, rather it chooses the one that matches for you.

    I’ve not had a problem using this previously.

    You can see it on my site here with Lato as the font –> Main Site and Stylesheet

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".