How to install custom fonts in css


Tags: html,css,fonts

Problem :

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?



Solution :

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; }

    CSS Howto..

    Jquery/CSS: How to apply addClass with a delay of 1 sec on mouseenter event.

    How to change cursor on the NextGen Gallery Slideshow in Wordpress

    How can i go back, forward and print a (local) WebBrowser1.DocumentText html page that's sourced from my.resorces - vb.net

    How to align text in CSS

    How to create desired shapes and position them accordingly using CSS, CSS3?

    How do I prevent text from flowing onto different sections of a page?

    how can I shape the image size according to its nested box

    How to change the color of each instance of a word in an html table with css?

    How to apply css using ng-class in angularjs

    CSS: How to get an animated gif background-image on top of a div

    CSS Web fonts how to use it with use of @font-face its not working

    How to find unused CSS from rails? deadweight not working [closed]

    How do I stagger divs like Google Plus?

    CSS - how to get position: absolute; to work well with different screen sizes

    How to center without the
    tag using CSS?

    How to get a gravity effect in a CSS animation?

    How to create a pure css slideshow? [closed]

    How to bring up a div box while hovering over a span tag in a section?

    css how to float or display two elements of unknown widths next to each other inside a div of unknown width

    Wordpress- How do i change the default font of navigation menu?

    How to use bootstrap grid system overlaying a map

    How do I center a set of JQuery Mobile radio buttons in the viewport?

    How to dynamically create CSS class in IE8

    How do I customize