Applying a single font to an entire website with CSS

html css fonts font-face
Michelle Smith picture Michelle Smith · Apr 6, 2012 · Viewed 194.1k times · Source

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

Answer

Jan Hančič picture Jan Hančič · Apr 6, 2012

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

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?

Read More
Use multiple @font-face rules in CSS

How can I use more than @font-face rule in my CSS? I've inserted this into my stylesheet: body { background: #fff url(../images/body-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica, sans-serif; } @font-face { font-family: 'GestaReFogular'; src: url('gestareg-webfont.eot'); src: …

Read More