Font family does not change in the output

Question

In the < h1 > tag, when I change any font family for any block of text (or a division), and open it in the browser, the font-family does not change. There is no change at all in h1, that I had applied it to.

Following is my HTML code:

<h1 align="center" class="login">      
           LOG IN</h1><hr /><br />

This is my CSS code:

.login
{
    color:Black;
    font-family:Calibri;
    font-size:xx-large;
    font-weight: bold;

}

The output that I get is as follows:

I changed the font to Calibri also. But, no change was reflected. The output always shows the same font family. I do not understand, where the problem could be?

Answer 1

put 'Calibri'

p {
font-family: 'calibri';
}

<p>hello this is calibri</p>

Answer 2

check your @font-face rule in your personal style css file. you should add your fonts like this:

@font-face {
  font-family: "font name";
  src: url(font path/font name.eot);
  src: url(font path/font name.eot?#iefix) format('embedded- 
  opentype'),
   url(font path/font name.woff) format('woff'),
   url(font path/font name.ttf) format('truetype'),
   url(font path/font name.svg#font name) format('svg');
   font-weight: normal;
   font-style: normal
 }

and write your font name in front of font-family and the formats in the double quotation or single quotation like "Calibri" or 'Calibri' and 'svg' or "svg", the other type of quotation causes the font to not change correctly too(when you copy and paste your @font-face rule's code from some websites to your editor you can see that the shape of quotation differs).

and check your path you should separate it with forward-slash(/) e.g "my project/fonts/Calibri.woff2".

Use different formats to display your font correctly in different browsers."eot" format for IE8 and below, "ttf" for old browsers especially for mobiles, "SVG" for old browsers, "woff" and "woff2" for all modern browsers, if you don't have them you can transform your font in "transfonter.com".

Answer 3

The Calibri-font should work, if you're working on a newer PC or MAC.

If the @font-face doesn't work, there must be some code, which overwrites the h1 styling.

Try to locate if there is something else that overwrite the styling.

Else try to rename your .login with: h1.login:

So instead of:

.login {
   color:Black;
   font-family:Calibri;
   font-size:xx-large;
   font-weight: bold;

}

Use:

h1.login {
   color:Black;
   font-family:Calibri;
   font-size:xx-large;
   font-weight: bold;

}

Answer 4

You should first test your rule with a normal web-safe font like "Arial", this is the list of web-safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp

If that works then the problem is probably like Rana proposed, and you should add a font-face definition rule: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

If the normal web-safe fonts still don't work, you might have another rule, which is stronger, overriding this one. You can check that by inspecting that element in your browser (Chrome's devtools are best for this) and looking at your rule and seeing if it as a line striking it (meaning it's not used and the browser is ignoring it), something like this (just your rule instead of the background position rule):

Also, an easy way to test for this will be to try and add the !important keyword to the above rule to give it higher precedence than other rules.

.login {
    color: Black;
    font-family: Arial !important;
    font-size: xx-large;
    font-weight: bold;

}

So it'll look something like this in Chrome's devtools:

You can find more about this keyword and the whole cascading-precedence system that css implements here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

(Images taken from this blog post:)

Answer 5

Define your font first

@font-face{
   font-family:My Font; 
   src: url(fonts/myfont.ttf)
 }


h1{font-family:"My Font"}