How to reuse font families in CSS for quicker CSS loading

Question

Let's say I use different fonts on my page, let's say I use 3 different fonts in 10-20 different CSS rules and in each of them I must use the following and similar:

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

There must be some shortcut way to have these font families listed in CSS once and CSS rules could only have some way to "point" to which font family to use without the need of writing such long lines every time.

How can this be done?

Answer 1

With CSS you can manage two classes and attached them to your HTML element like the following:

.my-font {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.otherClass {
    background-color: white;
}

<div class="my-font otherClass">An HTML element</div>

Otherwise, you can take a look to a solution like SASS. The used language to develop is derived of CSS => SCSS. In my opinion, this new language rocks because you can:

• manage variables
• manage inheritance of CSS classes
• ...

It's cool because in your case, you could use one variable or use inheritance like this:

$my-font: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* variable of your font */

.otherClass {
    font-family: $my-font;
    background-color: white;
}

<div class="otherClass">An HTML element</div>

or

.my-font{
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.otherClass {
    @extend .my-font; /* inheritance of the lucidaFont class */
    background-color: white;
}

<div class="otherClass">An HTML element</div>

Answer 2

You could add a class to your style sheet for each font family, such as:

.fontA {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
.fontB {font-family: arial, helvetica, sans-serif;}
.fontC {Georgia, Times, "Times New Roman", serif;}

Then use it like this, with the other rules:

<div class="otherRule1 fontA ">
</div>

<p class="otherRule2 fontB">Lorem ipsum dolor sit amet, consectetuer</p>

Or, if you need it in the middle of a sentence:

<p>Lorem ipsum dolor, <span class="otherRule10 fontC">consectetuer adipiscing</span> elit.</p>

Answer 3

You could also define your font with @font-face:

@font-face {
    font-family: MainFont;
    src: local('Lucida Sans Unicode'), local('Lucida Grande');
}
@font-face {
    font-family: HeadlineFont;
    src: local('Arial'), local('Helvetica');
}
@font-face {
    font-family: SerifFont;
    src: local('Georgia'), local('Times'), local('Times New Roman');
}

Unfortunately, the fall-back font types (sans-serif, serif, cursive, monospace, and fantasy) don’t seem to work with local (and I was unable to find a clear specification on this), but this still reduces your CSS to:

a {
    font-family: MainFont, sans-serif;
}

Another trick to reduce the size of your CSS is to combine all selectors that use the same font with a comma:

h1, h2, h3, .headline, section > .title {
    font-family: HeadlineFont, sans-serif;
}

Instead of the more verbose

h1 {
    font-family: HeadlineFont, sans-serif;
}
h2 {
    font-family: HeadlineFont, sans-serif;
}
h3 {
    font-family: HeadlineFont, sans-serif;
}
…