How do I add custom fonts?

Question

How do I install a custom font on an html site?

For example, I was working on a wedding website, and I was finding a lot of nice fonts for that subject, but I can't find the right way to add that font to the server, or to include that font with CSS?

http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website?rq=1 — Damian Krawczyk, Feb 13 '14 at 08:12
Dive in to @font-face http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp — timo, Feb 13 '14 at 08:12
check out Paul Irishs Blogpost on bullet proof font face. http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ — Haroldchen, Feb 13 '14 at 08:14

score 4 · Accepted Answer · answered Feb 13 '14 at 08:17

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>

score 2 · Answer 2 · edited Feb 24 '18 at 07:59

2

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

edited Feb 24 '18 at 07:59

Jason Aller

3,541
28
38
38

answered Feb 13 '14 at 08:21

Aditya

107
6

score 1 · Answer 3 · answered Feb 13 '14 at 08:13

1

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

this is the css code.

answered Feb 13 '14 at 08:13

Goos van den Bekerom

1,475
3
20
32

score 1 · Answer 4 · answered Feb 13 '14 at 08:13

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

score 1 · Answer 5 · answered Feb 13 '14 at 08:15

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.

score 1 · Answer 6 · answered Feb 13 '14 at 08:16

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.

How do I add custom fonts?

6 Answers6

Linked