Current time: 04-23-2014, 03:09 PM Hello There, Guest! (LoginRegister)

Post Reply 
Font Squirrel
12-07-2011, 09:22 AM
Post: #1
Font Squirrel
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.
Find all posts by this user
Quote this message in a reply
12-07-2011, 03:26 PM
Post: #2
RE: Font Squirrel
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.
Find all posts by this user
Quote this message in a reply
03-15-2012, 12:45 PM
Post: #3
RE: Font Squirrel
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-b...ace-syntax
http://webtypography.net/toc/
http://www.alistapart.com/articles/real-...b-context/
http://www.alistapart.com/articles/on-web-typography/
http://sixrevisions.com/css/font-face-guide/
http://www.smashingmagazine.com/2011/03/...ul-tricks/
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: