Implementing
@font-face

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

Download Erana.zip

After uploading your set of custom font files to a “fonts / under your root folder or 'wp-content' folder” directory, add the following CSS code to your stylesheet.

Paste the following code into the <head> section of your site

Paste the following code into the yourstyle.css

yourstyle.css

< /* @font-face */
@font-face {
 font-family: 'Erana';
 src: url('../fonts/Erana.eot?') format('eot'),
 url('../fonts/Erana.woff') format('woff'),
 url('../fonts/Erana.ttf') format('truetype'),
 url('../fonts/Erana.svg#svgErana') format('svg');
 font-weight: normal;
 font-style: normal;
}

Paste the following code into the <head> section of your site

<html>
<head>
 <link rel="stylesheet" href="Erana/style.css" />

</head>
<body>

Check out the examples to start using Erana icons!

See the video tutorial