|
Web Fonts
Last updated: 21:30 11th May 2000
19/04/2000: Old tutorial "spaces" fix here
Quick Links
Introduction
This page is a sort of tutorial or masterclass on how to set up fonts using
Richard Griffith's ttf.library, and then configure your browser - in this
case Voyager 3.1 and higher - to use those fonts when displaying webpages.
To do this, you will need the following:
A note about Font Caching
Also PLEASE make sure you disable things like MCP's FontCache patch, or any AvailFonts()
patch which requires you to MANUALLY re-generate the cache on changes. I recommend you get
Thomas Richter's FontCache from Aminet, it really is the superior version
and works fine here with the tutorial.
Installing the Fonts
The first step is to install and configure your fonts. I have created archives
for the popular Microsoft WebFonts pack which are available for download here.
To install the fonts, simply stick them into a directory - I use FONTS:_truetype/ but
it's possible to put them anywhere you like, even on a CD.
Codepages
Once you have the Truetype fonts copied to your hard disk, it is a good time to set
up the default codepage. Since most (if not all) standard Truetype fonts hold a complete
set of Unicode glyphs, a file is needed to map those characters to Amiga equivalents,
which we will do via the
Microsoft Windows 1252 Codepage.
Why aren't we using ISO-8859-1?
That's a good question, and thankfully easily answered: Codepage 1252 is the system
Windows uses to map it's fonts out for standard "Western" fonts. It is IDENTICAL to
ISO-8859-1 except for a few extra mappings, cunningly inserted into an area that is
marked "reserved" by the ISO-8859-1 specification: things like Trademark symbols,
SmartQuotes and the like. This will actually make the websites you visit better if
they use these "special" glyphs (which web-"masters" do) because you'll see them how
they were intended, rather than the little annoying placeholder box
Okay then..
So, to do this, you need to get hold of a little utility called ttfcp which was
installed when you installed ttf.library. Got it? Good. Make sure you have that codepage
file, open a shell and type:
ttfcp cp1252.txt env
This will create a 512 byte file in ENV: and ENVARC: called ttfcodepage. That's it,
installed, and you should reboot to make everything take effect.
Configuring via TTFManager
Now you need to fire up the TTFManager application from the ttf.library
distribution. You should see something a little like this:
In the box marked Font Source, type the path where you extracted your TTF
fonts to. TTFManager will scan the directory for Truetype fonts and display their
names in the box on the left. This can take some time. In the box marked Font
Destination, type in a path which is on your font path. This is usually
FONTS:.
Now, it gets a little complicated. You could simply click the Install All
button, but that will incorrectly install most of the fonts: they'll essentially come out
tiny.
So we click on the Options button to get this window:
This gives you some extra, somewhat scary options. I'm afraid this REALLY is necessary.
If you just use Install All, then the bounding boxes for the characters are set to
defaults. If you have a Windows machine, the fonts are fine, but on the Amiga, the spacing
is set a little too small, and you need to load a font of size 15 or thereabouts to get a
font the same size as Helvetica/11. This works around that by defining the font's boxes in
a different way. As an example, here is a font which has been configured with the default
settings:
.. and this is the font as we will configure it:
Now you have to admit, the difference in quality is worth the work, isn't it? :)
Now, for each font you want to install, click on it's name in the standard TTFManager
window. The data will update in the Options window to match the font.
Setting the Bound Box
Click the button marked Preview. You'll get a little window like this:
As a guide, you may want to resize it so that the title bar says 12 <font name>
because it will make it easier to see what you are trying to do. Once resized, you should see
that the font, at size 11, is unreadable. To fix it, find the portion of the GUI marked
Metric Source and change the cycle gadget to say Raw EM
The preview window should now update. Looks a lot better, doesn't it? If it doesn't
look too hot, try changing the box to Custom and clicking Calculate. Decide
which one looks better, make sure it's chosen, and then you can finally click Install
for that font. Your hard disk will click for a second, and install. That's the first font
done!
Things to look out for
Be wary of the Raw EM option, though. If the font preview manages to overlap the
window borders, then the font is being sized too large, and will layout unpredictably:
most noticably multiple lines of text will overlap. If you feel adventurous, I think
you can select Raw EM for one font, install it, and then click Install All to
get all of the fonts installed using it, but you may fall foul of the caveat above
if you do. Also, some of the other Metrics may be better for some fonts. You really do
have to experiment, because laziness just brings a crap configuration and ugly fonts..
Now do it for all your fonts..!
So now you can do that for all the listed fonts. Here is a checklist to remind you what
to do:
Summary
- In the main GUI, click the Options button
- In the Options GUI, click the Preview button
and resize the window to display a 12pt font
- Pick a font from the Available Fonts list
- Pick a Metric Source that makes your font a decent size
- Click Install
- Go back to item 3 and pick the next font
Setting up Voyager
This is the cool bit: setting Voyager 3.x up to use these fonts. In actual fact, it's
dead easy to do it. Simply open up Voyager's prefs and pick the Fonts page. It should
look a little like this:
Now, this is very very easy. Pick a font that you would like to use as your standard
browsing font. I think Tahoma is a good one, it's very clear. Verdana is also nice, if
a little wide IMO. Click on the (Default) box on the list, click the "Font Requester"
button, and pick the font from the ASL requester. For the default size, 12 is okay on
most systems.
Ranges
Once the font is in the Default box, you need to click the Make Range button. This
will fill the boxes with the font you picked, and as standard step the sizes by 2 points
each way. So by selecting Tahoma/12 for the default size, you automatically get fonts set
up for Tahoma 8, 10, 12, 14, 16, 18 and 20. This is a good range, but 8 points is a little
small, so you should change the first two fonts to something bigger. My font range at the
moment is to use sizes 10, 11, 12, 14, 16, 20, 24. This is fine on a PAL: Hires Laced
screen, or an 800x600 one. You may want to add 2 or 4 to each of those sizes for bigger
screens (and jammy graphics owners!). Set the (Fixed) font to another Truetype, such
as Andale Mono, with the same range that you picked for (Default).
The (Template) font
The Template font is basically what Voyager uses to pick out font sizes for fonts it finds
in your FONTS: directory. For instance, if a website picks the Arial typeface, Voyager
searches for a font called Arial in your FONTS: path. If it finds it, it will load the
font up with the sizes you specify here. This saves you defining 50 different font faces when
they all need to be the same sizes anyway. Add in the sizes for the font in (Template)
the same way that you did for (Default) and (Fixed), and just to be sure use the same sizes as
well. TIP you can change the name "ttftemplate" to something else like Tahoma to get a
preview of a proper font rather than a hideous, unscaled Topaz/8 font, it doesn't matter what
the font is called, just what the sizes are. For general use, that's all you needed to do.
Custom Typefaces
If Voyager finds the name of a typeface in it's internal list, it will use it rather than
applying the standard Template font. For fonts such as Times or Helvetica, you don't want it
using the hideous Bitmapped versions that come with the OS, so you can define replacements
using scalable typefaces. We'll do this now for the fonts I just mentioned.
Click Add Face. This will bring up a font based on the Template font. Type the name
Helvetica in the box under the list, and then update each font size to use a Helvetica-based
font, of which the best is Arial. You can use CGTriumvirate if you like, which comes with
AmigaOS. Add Face for Times, but instead of Arial or CGTriumvirate, put in TimesNewRoman
or CGTimes. And then do the same for Courier and simply place in your favourite fixed width
font, or CourierNew if you have it. This covers the most popular font substitutions.
That's it!
Well that's it, for Voyager at least. You can now surf the web and all FONT FACE tags will be
picked up and done correctly. But.. it's a bit slow. Loading up a scalable typeface and converting
it to a bitmap for display is a slow process, even on an 060. So we create pre-rendered versions
to speed it all up.
BitLine - Speeding It All Up
With ttf.library, you get a neat utility called BitLine. This basically creates standard Bitmapped
fonts out of the scalable versions you have installed. It's FRIGHTENINGLY easy to use, too. First,
you need to get the names of the fonts you installed earlier. It will do to simply create bitmaps
bitmaps for the ones you have set in (Default), (Fixed) and the most popular fonts that get used
(Tahoma, Courier New, Trebuchet MS, Verdana, Times New Roman, Georgia, Andale Mono). So here we go:
Open up a shell. For every font, type in this:
bitline <font name> <size> <size> <size>
Where <font name> is the name of the font, and each <size> is a size
you defined in Voyager prefs. Here are some examples:
bitline Tahoma 12
bitline TrebuchetMS 10 11 12 14 16 18 20
bitline TimesNewRoman 12 24
If you like, you can load each of those fonts up in a font editor to remove any glitches
in the characters: prime candidates are the M and W characters, and ones with curves in:
0, 2, 3 and O for instance. TypeFace is a good choice for this,
but it isn't necessary.
And That Really Is It!
Everything should be configured nicely now. Just to show you how good Truetypes can look
when configured properly, the font I used for my Workbench is Tahoma/12 - look at the title
bars at how smooth and clean it is. I'll post some screenshots of V3 looking at pages
using the FONT FACE tag soon
Microsoft TrueType WebFonts
You lucky lucky people are in for a treat! I've taken the most popular fonts used on the web
and put them into LZX archives for you to download. That way, you don't need a PC to get the
fonts, and can rest easy that they are the latest, top quality versions taken from a clean
Windows 2000 installation. Oh yes! :)
The fonts are all in two archives: one for the plain font and one for the "styles" of that font,
such as Bold, Italic, and Bold Italic. You don't need the styles
archive in all honesty, and ttf.library doesn't yet have the support for Font Families feature
so you'll just get an extra fonts in your list and no benefit for browsing. But just in case,
they are there. If you have Windows or Linux or whatever, you can use them properly from here as
long as you can unpack lzx archives. I'll leave YOU to work out how to do that.
| Font name | Plain Archive | Styles Archive | Test |
| Andale Mono |
Plain |
|
ABC 123 Lazy brown dog.. |
| Arial |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Arial Black |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Arial Narrow |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Comic Sans MS |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Courier New |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Georgia |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Impact |
Plain |
|
ABC 123 Lazy brown dog.. |
| Lucida |
Plain |
|
ABC 123 Lazy brown dog.. |
| Tahoma |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Times New Roman |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Trebuchet MS |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Verdana |
Plain |
Styles |
ABC 123 Lazy brown dog.. |
| Webdings & Wingdings |
Plain |
|
ABC 123 Lazy brown dog.. |
Links, Utilities and Extras
Thomas Richter's FontCache
is a must for anyone who has lots and lots of fonts installed. It's the best version
available of this kind of patch by virtue of it not requiring a manual generation of the
font cache every time you add a font. It physically patches diskfont.library and FixFonts
to do it's job, which makes it the cleanest too (you don't need to actually run an external
patch program to start it up - it's virtually built in!)
TypeFace bitmap font editor
A lovely program which I use religiously. The perfect way to edit bitmap fonts. It only takes a few seconds
to notice a fault in a font, fire up TypeFace and take out the rogue pixel, then resave.
Microsoft Typography
This is where I got the fonts from when I couldn't get them from my Windows 2000 installation,
these are the officially free fonts which every man and his dog use on the Internet.
Alternatives to this tutorial
I'm not a mean person, so I'll mention the "other" Amiga WebFonts site on the net, at
http://www.amiga.csti.ru/websurf/. It
features downloadable bitmapped fonts, created from the Truetype originals, in various
codepages. The first versions were hideously buggy and crashed people's machines but
I hear they're okay now.
Advantages and Disadvantages
The other tutorial basically means less work for you. It also takes up less disk space,
and is probably slightly faster. The fonts will eventually become pre-fixed to get rid
of the glitches.
But that's where it ends. Think of the advantages of this tutorial: you get proper,
scalable typefaces from the originals, you're able to set your own codepage (go get any
one from ftp://ftp.unicode.org/) globally and per-font,
gives you the ability to use pretty much any Truetype font you can find and get it working
perfectly by the same method.
This tutorial is also futureproofed. Why? Well, consider that Voyager gets CSS sometime soon,
and takes notice of point/pixel-based font sizes and the like. What happens when you are
using pre-created bitmap fonts with no scalable backup? They have to be scaled, and they
will look horrible. What happens when you're using scalable fonts? They come out just fine.
This is why I'm not going to make bitmap versions: that's for you to do
And all for a little work on your part. If you're lazy, go for the precreated fonts and suffer
later. Or get a modernised, multi-purpose Amiga config and reap the benefits with very few
penalties (mainly in your time, and a bit of disk space, and speed when you have to generate
a bitmap on the fly)
|
