This post starts from a discussion with a user on elegantthemes forum. He was very upset because one of the themes he was using it didn’t came with a non Jquery version, so if a new visitor doesn’t have java activated he can still browse the site without problems.

The problem with custom font’s such as League Gothic the one used on the Style theme is that if a user came to my site, and I have this font used for the title of my post set the visitor will not see the League Gothic font, but instead his browser will render a default font (Times New Roman).

Now in this case we have a problem. But there is an alternative to this cufon thing (which by the way is so cool) and and think the following solution will work just fine. So if you want to use a custom font and you have that font in a tff format or otf format than you can use it in your site and you will be sure that anyone who came to your site see the same thing.

But how this works. Simple. Just create a folder in your theme folder (let’s just say: Fonts) and upload the custom font or the fonts you’re using on your site.

In your style.css file, when you declare a new css rule, for example for the font-family property, you can use something like this:

  
  h1{
    font-family:"League Gothic";
    src:url(Fonts/League-Gothic.otf)
    color:#CCC;
    size:14px;
  }
  

In this code we have set a h1 tag which uses the League Gothic font, has a light gray color and a size of 14 px. So if we set a h1 tag for our titles, and for that we have the code above, then the browser will know where the font we used is, so from this point on the font will be render without problems.

About author

Young and dedicated fellow, which has playing with WordPress for 5 years now, likes everything about web design and web development.

View all author posts →

Share This