Skip to main content

Developer Note: Non-Standard Fonts

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:

  1. Add the fonts that you want (TTF or OTF).
  2. Select the fonts that you want to generate (may as well choose them all for future-proofing).  
  3. Choose "Make Hints" if you are not absolutely sure that your font has all the hints that it needs.
  4. Generate your font.
  5. 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.
  6. 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.
  7. 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.
Labels:

Comments

Post a Comment

Popular posts from this blog

How To Run Chrome From Within Notepad++

If you have recently tried to Run  Chrome from within Notepad++ recently, you've probably encountered the same issue I did.  Chrome didn't run. The fix is actually really simple.  Open up the Run box in Notepad++ and browse to your installation of Chrome. ie.  C:\Program Files\Google\Chrome\Application\Chrome.exe Select the file when you find it.  Now, the trick is: Put quotation marks around the path you see in the Run  box.  Now, put 1 space after the closing quotation mark. Type this: $(FULL_CURRENT_PATH) It'll look something like this: Click Run .  If Chrome opens, click Save and set your hotkey.
15 comments
 Developers - Read More...

Developer Note: Virtuemart - Editing the Add to Cart MooTool Popup

To edit the “Add To Cart” popup that appears when you add an item to a cart in Virtuemart, there are few files that you need to know about. These are the files to know \components\com_virtuemart\themes\default\theme.js \components\com_virtuemart\js\mootools\   - contains the files for editing the appearance of the popup. To edit the appearance of the box, edit \components\com_virtuemart\js\mootools\mooPrompt.css to change the styles as well as editing the 2 images in the directory to edit how they appear as well (close box and header-background)
8 comments
 Developers - Read More...

Proper Viewport Scaling on iPad and iPhone

So, this is a little silly and I'm a little embarrassed to say that I've spent far too much of my time on this issue. I had a multi-page site that wasn't displaying correctly on my iPad.  One page would look great, but the next would have the top menu cut off on the right and everything would be slightly zoomed in. I realized that it was a scaling issue, but for all the experimenting I did with the meta viewport tag , I couldn't get it to work. Then I thought of something...some pages didn't have as much content as the others.  The longer pages were displaying great, it was the pages short on content that weren't.  So, I went ahead and set a min-height for each page of 1050px (I figured it had to be a little larger than the 1024px portrait height of an iOS device) and voila, it worked. All the pages showed correctly.  Now, I fully admit that this is most likely a hack that isn't considered the "proper way", but I am absolutely open to sugge...
1 comment
 Developers - Read More...