2

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:

enter image description here

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?

Eshita Shukla
  • 791
  • 1
  • 8
  • 30
user3134694
  • 75
  • 2
  • 3
  • 16
  • have you defined the font family that you are adding by ``@font-face`` ? – Muhammad Usman Jan 27 '14 at 13:19
  • 1
    Try with another font if it doesn't work you might have other css rules which take precedence over this one and overrule it. Can you link to a jsFiddle that recreates this? – Lior Jan 27 '14 at 13:19
  • Can you try "font-family:"Times New Roman",Times,serif;" to see if it's working? I suspect there is an override going on in your css file. – Minelava Jan 27 '14 at 13:20
  • yes i try times new roman and other fonts instead of calibiri but it does not work – user3134694 Jan 27 '14 at 13:24
  • @RanaMuhammadUsman how i defined? – user3134694 Jan 27 '14 at 13:25
  • Sounds like you have a competing style with higher specificity, or do not have Calibri available on the testing box (think only get it with Office). If you are testing in modern browser, use the F12 dev tools to check the cascade (e.g. right click element and choose 'Inspect Element' on Chrome) – Ruskin Jan 27 '14 at 13:57

5 Answers5

5

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

M.rnnnn
  • 112
  • 2
  • 11
2

Define your font first

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


h1{font-family:"My Font"}
Muhammad Usman
  • 10,426
  • 22
  • 72
  • 107
0

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

ignored css 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: using the css "!important" keyword

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

Lior
  • 1,599
  • 17
  • 21
0

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;

}
TheYaXxE
  • 4,196
  • 3
  • 22
  • 34
  • Not completely true, especially on Macs and Windows older than Vista, not all machines will support Calibri as its an office font.. http://cssfontstack.com/ – Lior Jan 27 '14 at 14:32
  • but h1 is not one in project i use h1 in many places so when i use this way ..where h1 places all h1 get this style but i want only in specifically not all in places where h1 is – user3134694 Jan 27 '14 at 17:18
0

put 'Calibri'

p {
font-family: 'calibri';
}
<p>hello this is calibri</p>
Simon Beel
  • 1