CODEWITHSUNDEEP
htmlcssfontsfont-face
MattDiamant
MattDiamant

Reputation: 8771

@font-face with multiple font-families

We're changing a font on our site from FontA to FontB. Seems simple enough. The problem is is that FontA is hardcoded everywhere, and even in places that we can't easily access (content that we're pulling in from external databases has this font hardcoded, etc.). What I'd like to do is something like this:

@font-face {
    font-family: 'FontB', 'FontA';
    src: url('fontB.eot');
    src: url('fontB.eot?#iefix') format('embedded-opentype'),
         url('fontB.woff') format('woff'),
         url('fontB.ttf') format('truetype'),
         url('fontB.svg#fontB') format('svg');
    font-weight: normal;
    font-style: normal;   
}

So both FontA and FontB use the same font. That way, all the legacy hardcoded content that uses FontA will start using FontB instead, and all future content will just use FontB. Is declaring multiple font-family legal and valid? Will it work cross-browser for browsers that use @font-face? If this won't work, I can just declare two @font-face, so it's not a huge deal. I'm just wondering if it's possible.

Upvotes: 0

Views: 259

Answers (1)

BoltClock
BoltClock

Reputation: 723388

Unfortunately, you'll have to make do with two separate duplicate @font-face rules. The syntax for the font-family descriptor, unlike the font-family property, does not permit more than one family, so the syntax you have is invalid.

Attempting to specify it in two declarations just causes the latter to override the former like you would expect in a style rule, meaning the following:

@font-face {
    font-family: 'FontA';
    font-family: 'FontB';
    ...

Is equivalent to:

@font-face {
    font-family: 'FontB';
    ...

Upvotes: 2

Related Questions