css fonts

[findtim]

hi, found this, could be good for someone just doing their own site as you can get a free font

https://typekit.com/fonts?collection=trial

anyway, just thought someone might find it useful, i think the tracking would be from the email signup so if you did it PER domian you could be cool.

but $50 p/a for umlimited sites is a good deal.

they of course are competing against "google fonts " so who knows.

tim

 

[atom]

I'm a big fan of Typekit too. $50/year is good value given how much difference some custom fonts makes to a site.

 

[chris]

+1

On important sites consider using the asynchronous embed code. It's now an option (under Advanced), it just means that your site still loads if their servers are unreachable.

Cheers,
Chris

 

[findtim]

here's an example of a few css methods i use and they work well.

this goes at the top of your css and then you can use them throughout your css.

load your fonts to your website directory and all is good, but you can also link back directly to google fonts.


@font-face {
font-family: 'MyriadProCondensed';
src: url('lib/fonts/myriadpro-cond-webfont.eot');
src: url('lib/fonts/myriadpro-cond-webfont.eot?#iefix') format('embedded-opentype'),
url('lib/fonts/myriadpro-cond-webfont.woff') format('woff'),
url('lib/fonts/myriadpro-cond-webfont.ttf') format('truetype'),
url('lib/fonts/myriadpro-cond-webfont.svg#MyriadProCondensed') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
/* This declaration targets Internet Explorer */
font-family: 'MyriadProRegular';
src: url('lib/fonts/myriadpro-regular-webfont.eot');
}
@font-face {
/* This declaration targets everything else */
font-family: 'MyriadProRegular';
src: url(// format('no404'), url('lib/fonts/myriadpro-regular-webfont.woff') format('woff'), url('lib/fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('lib/fonts/myriadpro-regular-webfont.svg#webfontalIcirPh') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AvantGardeMdBTMedium';
src: url('lib/fonts/avgardm-webfont.eot');
src: url('lib/fonts/avgardm-webfont.eot?#iefix') format('embedded-opentype'),
url('lib/fonts/avgardm-webfont.woff') format('woff'),
url('lib/fonts/avgardm-webfont.ttf') format('truetype'),
url('lib/fonts/avgardm-webfont.svg#AvantGardeMdBTMedium') format('svg');
font-weight: normal;
font-style: normal;
}