Applying a single font to an entire website with CSS

Question

I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like:

button{font-family:Algerian;}
div{font-family:Algerian;}

The method written below is also highly discouraged:

div,button,span,strong{font-family:Algerian;}

Solution 1

Put the font-family declaration into a body selector:

body {
  font-family: Algerian;
}

All the elements on your page will inherit this font-family then (unless, of course you override it later).

Solution 2

*{font-family:Algerian;}

better solution below Applying a single font to an entire website with CSS

Solution 3

The universal selector * refers to all elements, this css will do it for you:

*{
  font-family:Algerian;
}

But unfortunately if you are using FontAwesome icons, or any Icons that require their own font family, this will simply destroy the icons and they will not show the required view.

To avoid this you can use the :not selector, a sample of fontawesome icon is <i class="fa fa-bluetooth"></i>, so simply you can use:

*:not(i){
  font-family:Algerian;
}

this will apply this family to all elements in the document except the elements with the tag name <i>, you can also do it for classes:

*:not(.fa){
  font-family:Algerian;
}

this will apply this family to all elements in the document except the elements with the class "fa" which refers to fontawesome default class, you can also target more than one class like this:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}

Solution 4

Ensure that mobile devices won't change the font with their default font by using important along with the universal selector * :

* { font-family: Algerian !important;}

Solution 5

* { font-family: Algerian; }

The universal selector * refers to any element.

View more solutions

Comments

[Admin]

font-family is an inherited value, so why not just define it on the body?

[okm]

You may want to choose the answer from Jukka K. Korpela. It's earlier than the current picked answer, for about one month, and has almost same content, anyway.

[davidcondrey]

possible duplicate of How to Apply global font to whole HTML document

[Mahdi Jazini]

I suggest you never use answer of (Jan Hančič) because it applies your font to all html tags even the tag you don't like to change. for example: if you make an img tag inside a td tag and made it text-align:center and vertical-align:middle. using this way your img tag will never be center of the TD. the best way: check your document and just apply the font format to the tags that have texts in them

[Jukka K. Korpela]

An element inherits font-family from its parent only when no style sheet sets the font family for the element. Browser style sheets typically set font family at least for input, textarea, code, tt, and pre elements.

[Jan Hančič]

You are right. I've been working with CSS resets for so long I forget this kind of things :)

[ianbeks]

Interestingly enough, this doesn't work when using Eric Meyer's CSS reset

[Max Strater]

Doesn't that apply the font family to every single element? This seems like it would apply it to unnecessary elements (like <img>) and be inefficient. I could definitely be wrong, but I've read to use caution with applying a style to everything.

[Julian F. Weinert]

Since the universal rule is not overridable, you won't be able to use a second font on your site.

[Lakshman]

This answer gives a much needed detail as per the current use of styling in webpages due to the use of icons from bootstrap (glyphicons) and font awesome

[Mahdi Jazini]

please note than: (not selector) is CSS3 which is not compatible with all browsers. IE 9+ we must wait at least 10 years for all people around the world to leave IE -9 families forever :D :'(

[Terje Solem]

Since noboy has mentioned this, the universal selector is know to be slow. more on that here: clairecodes.com/blog/…

[james ace]

Or better yet, combine the two top answers... body, *{font-family:Algerian;}

[codenamezero]

Avoid using !important

[dingalapadum]

@codenamezero why?

[codenamezero]

Because under normal circumstances, you don't and should not use !important period. You should be targeting CSS specificity whenever you try to style something. Blindly forcing the styling using !important is just bad practice and will cause issues further down the line.