Forums

Senff

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.

TheDoc

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?

Senff

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?

djrolstad

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

Senff

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

TheDoc

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

Senff

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 <strong> tags, it will take the second one. When the text in the markup is wrapped in <em>, it will take the third one. And then when both tags are used, it will take the fourth one.

Right....? :)

TheDoc

That's awesome!

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

chrisburton

You should also do a test case in CSS.

Example

  h1 {
      font: italic bold "Adobe Clean";
  }

cnwtx

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).

simoncox

This looks like a good candidate for a mixin then!

AndyHowells

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

treehouse : what would you like to learn today?

Forums

[Solved] Font face question