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

font-family is an inherited value, so why not just define it on the body? — , Apr 06 '12 at 09:40
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. — okm, May 11 '12 at 05:38
possible duplicate of [How to Apply global font to whole HTML document](http://stackoverflow.com/questions/7025756/how-to-apply-global-font-to-whole-html-document) — davidcondrey, Dec 27 '14 at 00:09
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 — Mahdi Jazini, Nov 30 '16 at 06:17

score 150 · Accepted Answer · answered Apr 06 '12 at 09:41

150

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).

answered Apr 06 '12 at 09:41

Jan Hančič

53,269
16
95
99

18

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. – Jukka K. Korpela Apr 06 '12 at 09:55
You are right. I've been working with CSS resets for so long I forget this kind of things :) – Jan Hančič Apr 06 '12 at 12:14

score 119 · Answer 2 · edited May 14 '20 at 08:46

119

*{font-family:Algerian;}

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

edited May 14 '20 at 08:46

Salam El-Banna

3,784
1
22
34

answered May 10 '12 at 15:22

3

Interestingly enough, this doesn't work when using Eric Meyer's CSS reset – ianbeks Dec 31 '12 at 15:19
Doesn't that apply the font family to every single element? This seems like it would apply it to unnecessary elements (like ) and be inefficient. I could definitely be wrong, but I've read to use caution with applying a style to everything. – Max Strater Jun 12 '14 at 22:47
Since the universal rule is not overridable, you won't be able to use a second font on your site. – Julian F. Weinert Jun 24 '15 at 14:35
Since noboy has mentioned this, the universal selector is know to be slow. more on that here: https://www.clairecodes.com/blog/2019-04-21-my-misconceptions-about-the-universal-selector/ – Terje Solem Nov 29 '19 at 12:54
Or better yet, combine the two top answers... body, *{font-family:Algerian;} – James Ikubi Aug 06 '20 at 11:39

score 70 · Answer 3 · answered Mar 01 '16 at 22:06

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

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 — Lakshman, Mar 11 '16 at 17:07
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 :'( — Mahdi Jazini, Nov 30 '16 at 06:09

score 19 · Answer 4 · answered Apr 06 '12 at 09:52

19

* { font-family: Algerian; }

The universal selector * refers to any element.

answered Apr 06 '12 at 09:52

Jukka K. Korpela

195,524
37
270
390

score 19 · Answer 5 · answered Apr 06 '12 at 18:52

19

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

answered Apr 06 '12 at 18:52

gabitzish

9,535
7
44
65

Avoid using `!important` – codenamezero Nov 24 '21 at 14:20
@codenamezero why? – dingalapadum Feb 04 '22 at 17:51
1

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. – codenamezero Feb 07 '22 at 16:12

score 3 · Answer 6 · answered Apr 06 '12 at 09:55

As a different font is likely to be already defined by the browser for form elements, here are 2 ways to use this font everywhere:

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

There'll still have a monospace font on elements like pre/code, kbd, etc but, in case you use these elements, you'd better use a monospace font there.

Important note: if very few people has this font installed on their OS, then the second font in the list will be used. Here you defined no second font so the default serif font will be used, and it'll be Times, Times New Roman except maybe on Linux.
Two options there: use @font-face if your font is free of use as a downloadable font or add fallback(s): a second, a third, etc and finally a default family (sans-serif, cursive (*), monospace or serif). The first of the list that exists on the OS of the user will be used.

(*) default cursive on Windows is Comic Sans. Except if you want to troll Windows users, don't do that :) This font is terrible except for your children birthdays where it's welcome.

score 2 · Answer 7 · answered Jan 15 '16 at 16:27

2

Please place this in the head of your Page(s) if the "body" needs the use of 1 and the same font:

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

Everything between the tags <body> and </body>will have the same font

answered Jan 15 '16 at 16:27

PICwebs

21
1

score 1 · Answer 8 · answered Jul 01 '15 at 15:26

Ok so I was having this issue where I tried several different options.

The font i'm using is Ubuntu-LI , I created a font folder in my working directory. under the folder fonts

I was able to apply it... eventually here is my working code

I wanted this to apply to my entire website so I put it at the top of the css doc. above all of the Div tags (not that it matters, just know that any individual fonts you assign post your script will take precedence)

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

If i then wanted all of my H1 tags to be something else lets say sans sarif I would do something like

h1{
   font-family: Sans-sarif;
}

From which case only my H1 tags would be the sans-sarif font and the rest of my page would be the Ubuntu-LI font

score 0 · Answer 9 · answered Dec 19 '18 at 00:49

0

in Bootstrap, web inspector says the Headings are set to 'inherit'

all i needed to set my page to the new font was

div, p {font-family: Algerian}

that's in .scss

answered Dec 19 '18 at 00:49

austin

998
2
12
22

score -1 · Answer 10 · edited Jan 24 '15 at 15:36

-1

*{font-family:Algerian;}

this html worked for me. Added to canvas settings in wordpress.

Looks cool - thanks !

edited Jan 24 '15 at 15:36

Sport

8,570
6
46
65

answered Jan 24 '15 at 15:27

intelijenjah

1

Applying a single font to an entire website with CSS

10 Answers10

Linked