Apply Calibri (Body) font to text

Kichu picture Kichu · May 30, 2012 · Viewed 133.4k times · Source

I have a div and in this div I want to display some text in Calibri (Body) font.

How can I do this?

This is the css I have been given :

.an_account_join_1 {
    float:left;
    width:100%;
    color:#000000;
    font-family:Calibri (Body);
    letter-spacing:2px;
    font-size:14px;
    text-align:center;
    margin:20px 0px;
    }   

This is the div:

<div class="an_account_join_1">Individual Free Membership</div>

There is no font style displayed with this font family.

When I look at the firebug output there is no style for font family.

Answer

Jukka K. Korpela picture Jukka K. Korpela · May 30, 2012

There is no such font as “Calibri (Body)”. You probably saw this string in Microsoft Word font selection menu, but it’s not a font name (see e.g. the explanation Font: +body (in W07)).

So use just font-family: Calibri or, better, font-family: Calibri, sans-serif. (There is no adequate backup font for Calibri, but the odds are that when Calibri is not available, the browser’s default sans-serif font suits your design better than the browser’s default font, which is most often a serif font.)