Forums

Using Chosen Fonts - Google Fonts versus Own Selection

Permalink
I am familiar with how to use Google Fonts and make the necessary file updates to use a font from the Google library. However, what if the desire is to use a font that is not from Google... how is this accomplished?

Is the font file loaded to the website and then referenced? How does this route work?

Thanks. tga
tgadams11
 
landollweb replied on at Permalink Reply
landollweb
One way to use any font on your web site is with cufon. It generates js code based on a font file you provide. This generated code is incorporated into our site theme. Here's the url to it if you're interested:
http://cufon.shoqolate.com/generate/...
tgadams11 replied on at Permalink Reply
tgadams11
Thanks for the suggestion. I will check it out.
Steevb replied on at Permalink Reply
Steevb
Another way, the one I quite often is font squirrel. Download the font package, place in your theme folder and call from your css.

http://www.fontsquirrel.com/
tgadams11 replied on at Permalink Reply
tgadams11
This was more along the lines of what I was thinking would need to be done.... I will give this a try and see how I make out.

Thanks...tga
Steevb replied on at Permalink Best Answer Reply
Steevb
Okay, a couple tips:

I create a 'font' folder in my theme folder, put the font types in it. then pull the fonts into my css
@font-face {
    font-family: 'CaviarDreamsRegular';
    src: url('fonts/CaviarDreams-webfont.eot');
    src: url('fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/CaviarDreams-webfont.woff') format('woff'),
         url('fonts/CaviarDreams-webfont.ttf') format('truetype'),
         url('fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


Then call the font where needed.
#wrapper h1, #wrapper h2, #wrapper h3{font-family:'CaviarDreamsRegular', Arial, sans-serif;}
tgadams11 replied on at Permalink Reply
tgadams11
Cool... appreciate the additional information... most helpful.