Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Using fonts unsupported by CSS

It is common problem that webdesigners want from webdevelopers more than they can give. For example font specially created for this design. It is not bad thing, becaue sometimes font might be just that element that adds twist to website design, but main problem is that these fonts are unsupported by CSS.

If font is supported, there is a possibility, that end user won't have this font isntalled. Mostly this problem could be sovled, by specifying multiple fonts with descending priorities from left to right.

But there is a method, that will guarantee, that end user will see your website just in font you specified.

All you need is to get your font in  different formats, like ttf, otf, eot, svg, etc (different browsers support different formats, so do your homework before using), upload them to website server and create custom font types using these CSS code:
@font-face {
    /* font family you will use in your CSS */
    font-family: 'Myriad';
    /* font style (italic, etc) */
    font-style: normal;
    /* Weight (bold, etc) */
    font-weight: normal;
    /* use local font, if user has installed it on his computer */
    src: local('Myriad'), 
    /* if not, get font from server in specified type*/
    url('./myriad.otf') format('opentype');
}
@font-face {
    /* Same font family */
    font-family: 'Myriad';
    /* same font style */
    font-style: normal;
    /* but this time, it's in bold */
    font-weight: bold;
    /* use local font, if user has installed it on his computer */
    src: local('Myriad Bold'), 
    /* if not, get font from server */
    url('./myriad_bold.otf') format('opentype');
}

/*********************************
 * and now create classes to use these fonts
 * just like you would use any other font
 *********************************/

.custom_font
{
    font-family: 'Myriad';
}

.custom_bold
{
    font-family: 'Myriad';
    font-weight: bold;
}

So where's the catch? Why not using it all the time for any font?

It takes time to load font to end user. So if visitor's Internet connection is slow, text will appear in browser default font, and only when font loading is complete, text will change to your custom font.

And as I said earlier, different browsers support different font formats. Here is a list I found somewhere on the web:

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG.
  • most mobile browsers support SVG

But there is a cure, you will need your font in multiple formats, and you can use css code like this one:

@font-face {
    /*font family name*/
    font-family: 'Myriad';
    /* for IE, don't specify format, or IE won't take it */
    src: url('GraublauWeb.eot');
    /*************************************************
      * setting local font to some random symbol, to eliminate situation, 
      * where user has same font name, but font differs from yours
      ************************************************/
    src: local('☺'),
        /*******************************
         * and provide different types 
         * so each browser can get the one it wants
         * just don't forget to provide format
         *******************************/
        url("GraublauWeb.woff") format("woff"),
        url("GraublauWeb.otf") format("opentype"),
        url("GraublauWeb.svg#grablau") format("svg");
}

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus