Embedding fonts on a website

Comments Off    Share on Facebook
ShortLink:

Thanks for this! If you want your pretty little fonts to follow from your letterhead and business cards to your website, here’s how I did it.  Of course I don’t care quite that much for my own purposes, well maybe I do, but I did it for someone else’s site and although Mr. Gates & I.E. is a pain in my body part that touches the chair when I sit down, it works.

/* IE correction, thanks Bill */
@font-face {
font-family: yourFontName;
src: url(/fonts/thefontname.eot); /* IE */
}
/*end of the Bill Factor!  don’t kid yourself I will always be 1st he says*/

@font-face {
font-family: yourFontName ;
src: url(/fonts/thefontname_.TTF) format(“truetype”);
}

.third { font-family: yourFontName, verdana, helvetica, sans-serif;  }

Now just use it like you normally would <p class=”third”>this is your stuff using your font, because you classed it up boss.  If you are using any browser besides IE for a browser this works, if you are using IE you get extra steps to make it work for IE folks. either site below will help and the first one will convert to otf from ttf for you too.</p>

oh and one last bit of info on this, just so you know how you rank with Mr. Gates…ready for this, if the IE correction isn’t first it won’t work in either browser cause firefox for example takes the last bit of css you give it and IE only takes what it wants, WOW that sounds like a whole other deep seeded issue that you need counseling for, but I am just sayin! okay so maybe this last part was just me and my code having issues and i got a little out of line, but hey it made sense- enjoy :-)

this site will help you with ‘BG + IE’ correction to eot font so the above IE correction will work
http://www.kirsle.net/wizards/ttf2eot.cgi

this site also has a much better tutorial than I do http://randsco.com/index.php/2009/07/04/p680

Comments are closed.