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

User · Answer

font-family  Algerian      The universal selector   refers to any element

User · Answer

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  lt i class  fa fa-bluetooth  gt  lt  i gt   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  lt i gt   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

User · Answer

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

User · Answer

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

User · Answer

font-family Algerian     this html worked for me  Added to canvas settings in wordpress    Looks cool - thanks

User · Answer

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

User · Answer

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

User · Answer

Please place this in the head of your Page s  if the  body  needs the use of 1 and the same font    lt style type  text css  gt  body  font-family FONT-NAME           lt  style gt    Everything between the tags  lt body gt  and  lt  body gt will have the same font

User · Answer

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

User · Answer

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

[html] Applying a single font to an entire website with CSS

Examples related to html

Examples related to css

Examples related to fonts

Examples related to font-face