Add custom fonts to site

  Categorized under:


LET CREATIVE HELL BEGIN

Let the devil hounds begin feasting on their code as the design angels strive to survive as we witness the death of standardization…

Let’s imagine you wanted to use a custom CSS font for your site.
Wait what? I can do that? Yes and apparently just using Arial is over.
STOP USING ARIAL.
Wait, what? I can’t. Arial is embeded in my keyboard! I can’t escape ARIAL! What about Verdana?
Verdana is for pussies.
What!?
Don’t cry. It’s ok. We’ll bury Arial next to Verdana one day, you can still use it for text.
Whew thanks…
But really, will we want to in the future? Probably not so get used to it. The web will become the whore of design and only the good will prevail.
The synopsis is pretty simple and here’s what I did to change mine up and I’ll use it in an example below.

First you must go out and download OTF (open type fonts) to use in your CSS.
Here download this free sample that I got from dafont.com

Then use your CSS stylesheet to declare a variable to the font like this:
@font-face{font-family:‘DisplayOTF.otf’;src:url(’/files/DisplayOTF.otf’);font-weight:normal;font-style:normal;}

Then declare the object to use that style like this
HOLY DIGIRATI
I HOPE THIS WORKS

Now you’ve gone from geek to creative geek.

— Zeus ::)
Mar 23, 2011

   

Real Time Web Analytics