ATTENTION: WiBit.Net will be temporarily taken offline for routine maintenance on 12/9/2016.
We apologize for any inconvenience.
WiBit.Net Blog (43)

 Adding Custom Fonts To Your Website

Thu Aug 7, 2014 0 Comments 1728 views 4 Likes
kevin

Adding Custom Fonts To Your Website

Not long ago web developers were stuck using a specific subset of universal fonts on their websites. But times have changed!

Modern websites are discarding the generic universal fonts in place of their own. This is fantastic! The ability to use your own fonts on your web site is important, especially if your branding is centered around a specific look.

Adding custom fonts to your website is fairly simple! In this post, I will assume that you don’t have all the formats at your disposal, and assume that you just have the ttf (True Type Font) file available.

Step 1: Locate your font

There are tons of website that offer fonts for free. If you’re hard core you can make your own fonts! If you are able to export to multiple formats (eot, woff, svg, and ttf) than that’s great! If not, you can continue to the next steps.

Step 2: Convert ttf to multiple formats

Not all browsers will accept a ttf file to render a custom font. It is good practice to offer EOT (Embedded OpenType), WOFF (Web Open Font Format), SVG (Scalable Vector Graphics), and TTF. You can download utilities to convert TTF into these, or you can use free websites to do the work. EverythingFonts.com has some sweet converters you can use:

http://everythingfonts.com/ttf-to-eot

http://everythingfonts.com/ttf-to-woff

http://everythingfonts.com/ttf-to-svg

Step 3: Implement CSS

In your web site CSS just add these lines:

// Legacy IE Support
@font-face {
    font-family:MyCustomFont;
    src:url(/path/to/fonts/MyCustomFont.eot)
}

@font-face {
    font-family:MyCustomFont;
    src:
            url(/path/to/fonts/MyCustomFont.ttf) format("truetype"),
            url(/path/to/fonts/MyCustomFont.woff) format("woff"),
            url(/path/to/fonts/MyCustomFont.svg) format("svg")
}

.myfont {
    font-family:"MyCustomFont"
}

Step 4: Use it!

Now that your font is available you can use the ‘myfont’ class to implement it with your HTML elements. For example:

<span class="myfont">This is my font!</span>

Clean Your IMAP Folders with PHP

Recently I received a message from Gmail stating that my personal account was about to exceed the 40 GB of space I have!

Announcing a new course on WiBit.Net: Introduction to Scripting Languages!

The team here at WiBit has been hard at work over the past few months putting together a brand new course lineup to roll out. In case the title didn’t give it away, we’re going to cover scripting languages! Yay!