Font face question

[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 ``.

[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 `` 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….? :)

[TheDoc]

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.

[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!

[Author]

Posts