CODEWITHSUNDEEP
htmlcssfonts
Sidney Sousa
Sidney Sousa

Reputation: 3584

How to install custom fonts in css

I have a folder with 2 custom fonts in a folder that I named Fonts and one of them is called PlayfairDisplay-Black. I do not know how to use them in the site that I am developing?

How can use these fonts?

Upvotes: 1

Views: 4430

Answers (4)

Himanshu Vaghela
Himanshu Vaghela

Reputation: 1119

You have to do link to the fonts style in your HTML, like this:

<link rel="stylesheet" href="fonts/fonts.css" type="text/css"  />

Attach fonts file using generate font-face from third party application like fontsquirrel.com or transfonter.org then add in your css fonts like

    @font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'open_sansregular'; }

NOTE: this is based on a webfont pattern that no longer applies. eot is not used except by IE8, svg is a format that is literally no longer maintained, and has actively been removed by most major browsers, and WOFF is a byte-for-byte wrapper around ttf and otf sources, with every browser that supports ttf/otf also supporting WOFF, so there is no point in loading both. For modern browsers, load WOFF (and WOFF2 if you need it, but it's still not well supported), and if you need IE8- support, add eot, and that's the only two you need.Here I attach other files only for knowledge.

Upvotes: 1

Harley Fuagras
Harley Fuagras

Reputation: 499

You can achieve what you want easily in https://www.fontsquirrel.com/tools/webfont-generator or https://www.web-font-generator.com/ There you can upload your fonts and get the font in the formats needed to make it work in the majority of browsers and the css calling those fonts. Upload the fonts to your project, include the css snippet they provide you, link your fonts properly and there you go.

Upvotes: 0

Jerry
Jerry

Reputation: 107

Try this in your css:

@font-face {
    font-family: 'MyFairFont'; /*to use later*/
    src: url('http://exampledomain.com/fonts/PlayfairDisplay-Black.ttf'); /*URL to the font*/
}

Then to use the font on a specific element:

.myclassname {
    font-family: 'MyFairFont';
}

Upvotes: 1

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. 

@font-face{ 
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');
}

All you have to do is link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'MyWebFont', Arial, sans-serif; }

Upvotes: 6

Related Questions