Best IT Recipes

Applying a single font to an entire website using CSS

I want to use one font called "Algeria" throughout my site. So, I need to change all the HTML tags, and I do not want to write different code for different tags, for example:

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

The method described below is also very discouraged:

 div,button,span,strong{font-family:Algerian;}
+75
html css fonts font-face
Apr 6 2018-12-12T00:
source share
10 answers

Put the font-family declaration in the body selector:

 body { font-family: Algerian; }

All elements on your page inherit this font family (unless, of course, you cancel it later).

+80
Apr 6 2018-12-12T00:
source share
 *{font-family:Algerian;}

ADD it

+91
May 10 '12 at 15:22
source share

Universal selector * applies to all elements, this css will do it for you:

 *{ font-family:Algerian; }

But, unfortunately, if you use FontAwesome badges or any badges requiring your own font family, this will simply destroy the badges and they will not show the desired look.

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

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

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

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

this will apply this family to all elements of the document except elements with the class "fa", which refers to the default fontavesome class, you can also target more than one class as follows:

 *:not(i):not(.fa):not(.YourClassName){ font-family:Algerian; }
+33
Mar 01 '16 at 22:06
source share
 * { font-family: Algerian; }

Universal selector * refers to any element.

+16
Apr 6 2018-12-12T00:
source share

Make sure that mobile devices do not change the font with their default font using the important ones along with the universal selector *:

 * { font-family: Algerian !important;}
+16
Apr 6 '12 at 18:52
source share

Since another font is most likely already defined by the browser for form elements, there are two ways to use this font everywhere:

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

You will still have a monospace font on elements such as pre / code, kbd, etc., but if you use these elements, you'd better use a monospace font.

Important note: if very few people have installed this font in their OS, then the second font in the list will be used. You have not defined a second font here, so the default serif font will be used, and it will be Times, Times New Roman, with the possible exception of Linux.
Two options: use the font @ font-face if your font is free to use as a downloadable font or adds backups: second, third, etc. And finally, the default family (sans-serif, italics (*), monospaced or serif). The first one from the list that exists in the user's OS will be used.

(*) By default, the cursor on Windows is Comic Sans. Also, if you want to troll Windows users, don’t do this :) This font is terrible, except for your children's birthdays, where it is welcome.

+2
Apr 6 2018-12-12T00:
source share

So, I had this problem when I tried several different options.

The font I use is Ubuntu-LI, I created a font folder in my working directory. under the fonts folder

I was able to apply it ... in the end, here is my working code

I wanted this to apply to my entire website, so I put it at the top of the css document. first of all Div tags (this is not important, just know that any individual fonts that you assign send your script).

 @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 my H1 tags to be something else, say sans sarif, I would do something like

 h1{ font-family: Sans-sarif; }

In this case, only my H1 tags will be in sans-sarif font, and the rest of my page will be in Ubuntu-LI font

+1
Jul 01 '15 at 15:26
source share

Put this at the top of your page if your body needs to use the same font:

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

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

+1
Jan 15 '16 at 16:27
source share

web inspector says in Bootstrap that headers are set to "inherit"

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

 div, p {font-family: Algerian}

what's in .scss

0
Dec 19
source share
 *{font-family:Algerian;}

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

It looks cool - thanks!

-one
Jan 24 '15 at 15:27
source share


More articles:


All Articles