Bdtjtk

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?

Define your font first

@font-face{

   font-family:My Font; 

   src: url(fonts/myfont.ttf)

 }





h1{font-family:"My Font"}

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

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;



}