Many of us would like to use non-standard fonts on our websites. The old way used to involve creating a few different styles for different browsers along with different fonts for those browsers.
I went through a situation where I converted a font from a Mac font to a Open Type Font (OTF) to a True Type Font (TTF) then, finally, to an Embedded Open Type (EOT) font. Of course, one needs an EOT for Internet Explorer and a TTF for everything else (usually). In my case, I needed to use 3 different programs to make the fonts that I needed!
Well, now I've stumbled across a site called Font Squirrel that will generate all the fonts that you need along with the CSS style code that you will need to use the fonts on your page.
Simply:
I went through a situation where I converted a font from a Mac font to a Open Type Font (OTF) to a True Type Font (TTF) then, finally, to an Embedded Open Type (EOT) font. Of course, one needs an EOT for Internet Explorer and a TTF for everything else (usually). In my case, I needed to use 3 different programs to make the fonts that I needed!
Well, now I've stumbled across a site called Font Squirrel that will generate all the fonts that you need along with the CSS style code that you will need to use the fonts on your page.
Simply:
- Add the fonts that you want (TTF or OTF).
- Select the fonts that you want to generate (may as well choose them all for future-proofing).
- Choose "Make Hints" if you are not absolutely sure that your font has all the hints that it needs.
- Generate your font.
- Download the files that the site generates for you and unpack the file that will contain a pair of CSS files, a sample site and all the fonts you need.
- Now, in almost all cases, you can disregard the base64 CSS file and just open up the stylesheet.css file and copy and paste the @font-face code in there into your own CSS file.
- Upload your updated CSS file to your website along with all the fonts that you just unpacked.
That's it. Very straightforward and very user friendly for a web designer.
Notes:
- To convert a Mac font to a PC font, use CrossFont, which has a 30 day trial. You choose the Mac font you want to convert and it will create an OTF for you. It works very well and will most likely be worth the price for the full version if you foresee yourself doing more than a few Mac font conversions over your career.
- Before stumbling across Font Squirrel, I used a very hard to use program called WEFT, from Microsoft, to create the EOT font that I required for use in Internet Explorer.
Comments
Post a Comment