DreamHost Forum
Font Squirrel - Printable Version

+- DreamHost Forum (https://discussion.dreamhost.com)
+-- Forum: Web Development (/forum-18.html)
+--- Forum: Web Design (/forum-2.html)
+--- Thread: Font Squirrel (/thread-133055.html)



Font Squirrel - Katieprice - 12-07-2011 09:22 AM

Has anyone successfully used Font Squirrel's typekits with a wordpress theme?

I'm confused on where to upload the the fonts- I'm new to having my own host. I understand the CSS portion and how to use FTP.. just not where to actually put the fonts.


RE: Font Squirrel - Katieprice - 12-07-2011 03:26 PM

After a LOT of looking around, I found a semi-solution. You can use the plug-in "Wordpress Font Uploader Free" and load your .otf and .ttf files there, and manage the fonts from the plug-in. I'm not sure if it will be compatible with all browsers, but it is a good start!

Hope this helps someone else.


RE: Font Squirrel - mattesque - 03-15-2012 12:45 PM

You can load the fonts (*preferably in their own directory) anywhere – I put mine in my theme folder – and you simply edit the CSS to reflect what directory they reside in.
For instance, say your font directory is located in the theme directory (/theme/fonts) and your CSS file is in its own directory (/theme/css), you would write the CSS like this:

Code:
@font-face {
    font-family: 'MyFontFamily';
    src: url('..fonts/myfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('..fonts/myfont-webfont.woff') format('woff'),
         url('..fonts/myfont-webfont.ttf')  format('truetype'),
         url('..fonts/myfont-webfont.svg#svgFontName') format('svg');
    }

The ".." tell the browser reading the code to jump out of the CSS's directory into the next one up, which would be the theme directory.

if the CSS file is in the same directory as the font directory, you would write the CSS like this:

Code:
@font-face {
    font-family: 'MyFontFamily';
    src: url('fonts/myfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/myfont-webfont.woff') format('woff'),
         url('fonts/myfont-webfont.ttf')  format('truetype'),
         url('fonts/myfont-webfont.svg#svgFontName') format('svg');
    }

Hope this helps. Here are some resources to learn more about @font-face and web typography:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
http://webtypography.net/toc/
http://www.alistapart.com/articles/real-web-type-in-real-web-context/
http://www.alistapart.com/articles/on-web-typography/
http://sixrevisions.com/css/font-face-guide/
http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/