Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
    
Sounds like you really should use a css preprocessor like LESS or Sass. –  zzzzBov Mar 27 at 19:17

3 Answers 3

up vote 7 down vote accepted

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>
share|improve this answer
1  
thank you, using two classes when one will have just font related style is good, how couldn't I think of this myself :D –  CamSpy Mar 27 at 13:55
    
@CamSpy: no worries. –  Zistoloen Mar 27 at 14:01
1  
Using SASS is not really an option as the OP’s wants to have “quicker CSS loading” speed. Using SASS only reduces the source file size but the compiled file will still be the same size. –  Raphael Schweikert Mar 27 at 15:48
2  
I would also mention LESS and Stylus which are alternatives to SASS. I personally think SASS is the weakest of the three (Stylus is best), but to each his own. –  NicolasMoise Mar 27 at 17:47
1  
I'm not going to downvote this, but naming your class lucidaFont is a Very Bad Idea. What happens in six months when you decide that those elements should be using Comic Sans? You're either left with a meaningless class name or you have to chance all of those style attributes. –  mikeTheLiar Mar 27 at 18:06

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>
share|improve this answer

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;
}
…
share|improve this answer
    
I think this answer is actually a lot better than the accepted one. –  NicolasMoise Mar 27 at 20:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.