How do I add custom fonts? [duplicate]

Answer 1

.my-font{ font-family: font name; }

this is the css code.

Answer 2

download your font and put in any directory. here i added in fonts directory

   <style>
    @font-face {
        font-family: 'maven_pro_light_300regular';
        src: url('fonts/mavenprolight-300-webfont.eot');
        src: url('fonts/mavenprolight-300-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/mavenprolight-300-webfont.ttf') format('truetype'),
             url('fonts/mavenprolight-300-webfont.woff') format('woff'),
             url('fonts/mavenprolight-300-webfont.svg#maven_pro_light_300regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    </style>

and you can use it by follow example:

<style>
h2{
    font-family:maven_pro_light_300regular; 
}
</style>

Answer 3

Google Fonts has an extensive set of custom fonts that are very easy to install and legally fine to use wherever you like: https://www.google.com/fonts. Just browse and click the fonts you want, then click USE. It'll provide you with all the necessary CSS, and the font files themselves are hosted by Google.

If you want to create an entirely custom web font, you can use FontSquirrel's web font generator (http://www.fontsquirrel.com/tools/webfont-generator). This allows you to upload any True Type font file you already own and transform it into a web font; it'll also provide you with the necessary CSS though you'll need to host the font files yourself.

Be careful legally with the latter option; not all fonts are licensed to be used on the web.

Answer 4

if you have a true type font then you have to use this

@font-face
{
 font-family: your_font_name;
 src: url(your_font_folder/font_name.ttf);
}

and use it like this

h2.title{font-family:your_font_name}

or another way to use the Google font API https://www.google.com/fonts

Answer 5

Using CSS3 you can make reference to a font file for use on the HTML page. Here is some code:

<style> 
@font-face
{
font-family: myFirstFont;
src: url(fontFILE.woff);
}

div
{
font-family:myFirstFont;
}
</style>

The location of the file would be added in place of "fontFILE". You would just upload the font file along with the HTML page.

Here is a W3Schools article about this: here

Answer 6

If you use a service like Font Squirrel you can make web safe versions of any font you have the rights to use. It also create a stylesheet with everything you need. What's left for you is add the font-family in the css and include the css stylesheet in your html page.