: How to reuse font families in CSS for quicker CSS loading 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

@Ann8826881

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;
}
…

Vote Up Vote Down

@Pope3001725

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>

Vote Up Vote Down

@BetL925

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>

Vote Up Vote Down