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..

    HTML Imported text doesn't show line feeds correctly

    How to align this text in CSS?

    How can I make this work?

    How to do valid CSS for li text and li text with image?

    How to implement this in pure CSS?

    How to align an element when it locates below some float elements?

    Javascript slideshow that gradually zooms on image [closed]

    How to get less to output a css variable with quotes

    How to calculate percentages in LESS CSS?

    how to fix height:auto css

    How to format my form with CSS?

    How To Insert Some Content Before An HTML Element In The Runtime Using CSS

    How to make multiple breaks using CSS?

    CSS hover - How do I get it to change two nested divs

    How to reapply .css file after UpdatePanel asynchronous call completed

    How to add css class?

    How to Get Element From Path Not Class or Id

    How create a grid in which a variable number of squares automatically resize to fit a space?

    how to vertical align div elements using CSS?

    How to change the css of the div that i just created in code

    Block grid shows horizontal scroll bar in Foundation

    How to create login popup on mouseover on a link using css & or javascript.

    How to set two directions for flex-box css?

    How to Show Menu after full size window in responsive Design

    How to contain a scrollable div element completely within another?

    How to “zoom”/“scale” in div's content with css or jquery?

    How to find last/first not empty child using only CSS?

    How do I center numbers in a table from Google Visualization API?

    How to set css styles with variables in rails if certain item is selected?

    How to align two columns of text in CSS