Using a custom font with CSS

问题:

I am attempting to get a custom font.

When I try, the font doesn't work and it uses custom Times new Roman.

This is my code in the style sheet:

@font-face {
    font-family: "ARBONNIE";
    src: url(Custom/ARBONNIE.ttf);
}
font {
    font-family: "ARBONNIE";
}

But, when I view the website, the custom font is not shown.
It's the correct directory and everything. Please help :(

回答1:

Your use of @font-face is not compatible with all browsers. A useful tool for generating cross-browser @font-face code is here: Font Squirrel @font-face Generator. That generator will give you all of the files you need as well as a complete example that you can use to test in various browsers.

Ultimately on your page, your CSS will look something like this:

@font-face {
    font-family: 'BitstreamVeraSerifBold';
    src: url('verasebd-webfont.eot');
    src: url('verasebd-webfont.eot?#iefix') format('embedded-opentype'),
         url('verasebd-webfont.woff') format('woff'),
         url('verasebd-webfont.ttf') format('truetype'),
         url('verasebd-webfont.svg#BitstreamVeraSerifBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.custom-font {
    font-family: 'BitstreamVeraSerifBold';
}

Note that I'm using the font BitstreamVeraSerifBold here, with the font files in the same directory as the CSS file.

And in your HTML:

<span class="custom-font">Your text here</span>

回答2:

Are you using it for the entire website?

where you put "font { }" is where you should assign the font whether it is a div,a,p,span,body,etc.

So try body { font-family: "ARBONNIE"; } hope it helps.

回答3:

I see two potential issues:

@font-face is only supported in certain browsers and with certain font types

IE9 supports @font-face for .eot fonts IE8 and earlier do not support @font-face Firefox, Opera, Chrome, and Safari support @font-face for *.ttf and *.otf fonts

Are you testing this in IE? The *.ttf won't work.

Second possible issue - try doing this without the word "font" as a selector. Either use a unique selector or assign it to the body or p selectors

edit - saw you want this for one area. Pick a new selector, use the font style like this:

@font-face {
  font-family: "ARBONNIE";
  src: url("Custom/ARBONNIE.ttf");}

ArbFont {font:16pt "Arbonnie";}

Then change your html to use the new selector such as this:

<div id="ArbFont">This is in Arbonnie</div>