www.font2web.com

www.font2web.com


This is easiest way to use any font for your web, without plugin.

  1. You have any fonts that will be used
  2. convert that font
  3. upload converted fonts to your server
  4. add css for your font
  5. implement font on any element

Here are detailed steps.

  1. I supposed you will use “Morpheus” Font for your web, and you had this font too.

  2. Time to convert ‘Morpheus’ fint by Uploading this desired font to this web

  3. Wait few seconds, your dowload file will ready sooner, save it to your local folder.

  4. Unzip your font, you`ll see converted font, the css style and sample html.

    fonts converted that  on folder

    fonts converted that on folder

  5. Now, to implement this tips, upload these converted font to your server folder fisrt, in my case, i uploaded them to new folder called ‘fonts’ on my active theme.

You will find this

/** Generated by FG **/

@font-face {
font-family: 'Conv_MORPHEUS';
src: url('fonts/MORPHEUS.eot');
src: local('?'), url('fonts/MORPHEUS.woff') format('woff'), url('fonts/MORPHEUS.ttf') format('truetype'), url('fonts/MORPHEUS.svg') format('svg');
font-weight: normal;
font-style: normal;
}
  1. Now, open and copy all style in css that came with converted fonts, and paste on your style.css, to do this, log to your Dashboard > Appeareance > Editor > Style.css

  2. click Update style.css

  3. Now, time to select what element on site that will be replaced by new font.

if you want to change site_title element, just paste like this

.site_title
    {
        font-family:'Conv_MORPHEUS',Sans-Serif;
        width:800px;
        margin:10px auto;
        text-align:left;
        border:1px solid #666;
        padding:10px;

}
  1. Click Update file again.

  2. You Done!

Sample

and looks like this

Izulthea.com

You Need this book:
CSS3: The Missing Manual