How to use any fonts in your website with @fontface

Posted by Ezgi Gunyel to Web Design on April 23rd, 2013

how-to-use-fontface-in-web-design

 

What is @fontface?

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed. This means that web designers will no longer have to adhere to a particular set of “web safe” fonts that the user has pre-installed on their computer.

 

How to use

1. Go to Webfont Generator and upload your free font

2. Accept the aggreement

3. Click “Download your kit” button

4. Extract your .zip file in a folder named fonts

5. Upload your fonts folder in your web host (same folder as your stylesheet (.css) file placed in)

6. Open your web page and add your new stylesheet within the <head> </head> section:

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

or you can use fontface declaration directly in your stylesheet and use your new font anywhere within your stylesheet. In order to do that, first copy fontface declaration from fonts/styleshett.css file to your own .css file, and use your new font in font-family property for any HTML element.

@font-face {
font-family: ‘monofontoregular‘;
src: url(‘fonts/monofont-webfont.eot’);
src: url(‘fonts/monofont-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/monofont-webfont.woff’) format(‘woff’),
url(‘fonts/monofont-webfont.ttf’) format(‘truetype’),
url(‘fonts/monofont-webfont.svg#monofontoregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body {
font-family: ‘monofontoregular‘, Helvetica, sans-serif;
}

 

 

leave a comment

3 + 3 =