Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Aliases for fonts in CSS

I've just got into using @font-face. One of the unexpected perks is that instead of using the proper font name I can choose a more useful one, which is useful for reskinning

e.g instead of

@font-face {
   font-family: Museo Slab;
   src: ...
}

I can have

@font-face {
   font-family: Branding Font A;
   src: ...
}

So throughout my site I can then have e.g.

h1 {
  font-family: Branding Font A, Georgia, Serif;
}

... pretty useful as the site I'm working on will be syndicated, and I can easily just serve up different @font-face definitions for different publishers.

After that lengthy preamble, my question is "Is there a way to have an alias for one of the regular webfonts?" So that I can have eg "Body Text" as an alias for Arial, but such that I could change the "Body Text" @font-face declaration to use a different font if I wanted to.

like image 796
wheresrhys Avatar asked Jan 21 '11 16:01

wheresrhys


People also ask

How do I name a font in CSS?

In CSS, we use the font-family property to specify the font of a text. Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".

What are the 5 font families?

In CSS (and in typography in general) there are five basic types, or families, of fonts: serif, sans serif, cursive, fantasy, and monospace.

How do I use multiple font family in CSS?

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. There are two types of font family names: family-name - The name of a font-family, like "times", "courier", "arial", etc.


1 Answers

I'm pretty sure the answer is no. But if there is a way I'd really like to know about it!

One way that might sorta work is:

@font-face {
   font-family: Alias;
   src: local('Arial');
}
like image 153
Raph Levien Avatar answered Sep 28 '22 03:09

Raph Levien