there is a simple way to do this: in the html file add:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Note: you put the name of .ttf file you have. then go to to your css file and add:
h1 {
color: blue;
font-family: vermin vibes;
}
Note: you put the font family name of the font you have.
Note: do not write the font-family name as your font.ttf name example: if your font.ttf name is: "vermin_vibes.ttf" your font-family will be: "vermin vibes" font family doesn't contain special chars as "-,_"...etc it only can contain spaces.
For the best possible browser support, your CSS code should look like this :
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For more info, see the article Using @font-face at CSS-tricks.com.
If you are using an external style sheet, the code could look something like this:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
And should be saved in a separate .css file (eg styles.css). If your .css file is in a location separate from the page code, the actual font file should have the same path as the .css file, NOT the .html or .php web page file. Then the web page needs something like:
<link rel="stylesheet" href="css/styles.css">
in the <head> section of your html page. In this example, the font file should be located in the css folder along with the stylesheet. After this, simply add the class="junebug" inside any tag in your html to use Junebug font in that element.
If you're putting the css in the actual web page, add the style tag in the head of the html like:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
And the actual element style can either be included in the above <style> and called per element by class or id, or you can just declare the style inline with the element. By element I mean <div>, <p>, <h1> or any other element within the html that needs to use the Junebug font. With both of these options, the font file (Junebug.ttf) should be located in the same path as the html page. Of these two options, the best practice would look like:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>
and
<h1 class="junebug">This is Junebug</h1>
And the least acceptable way would be:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
and
<h1 style="font-family: Junebug;">This is Junebug</h1>
The reason it's not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical. This is also the main reason that I recommend using the very first option of using external style sheets. I hope this helps.
You can use @font-face in most modern browsers.
Here's some articles on how it works:
Here is a good syntax for adding the font to your app:
Here are a couple of places to convert fonts for use with @font-face:
Also cufon will work if you don't want to use font-face, and it has good documentation on the web site:
Try this
@font-face { _x000D_
src: url(fonts/Market_vilis.ttf) format("truetype");_x000D_
}_x000D_
div.FontMarket { _x000D_
font-family: Market Deco;_x000D_
} <div class="FontMarket">KhonKaen Market</div>vilis.org
Source: Stackoverflow.com