EW 4: Creating a Font Family Group

(Applicable to all versions.)

You manage the font families that will display in the New Styles, Edit Styles and toolbar dropdowns using the Font Families tab of Page Editor Options.

font-families_thumbThe most important thing to know about font families is that you should always use font families Not a single font when you create your website. If you do not specify a font then the visitor will get whatever their web browser uses as its default. Typically, that would be Time New Roman on Windows browsers and Times on Apple browsers. I’m not sure what it is that is used by Chrome/Android.

Microsoft starts you off with a few of the most common font family groups used on the web and allows you to create your own groups that will be at the top of the font dropdown in the Create and Edit Styles dialog boxes. The “Add font” section is what allows you to create your own group from the fonts installed on your computer. Remember though that only fonts installed on the visitor’s computer will display when they visit unless you are using a web font library hosted on the web. Something beyond the scope of this tutorial and you would configure those using Typekit, Adobe Edge Web Fonts or Google Web Fonts.

I want to address the use of Verdana in a font family list. Verdana is only used in two default font groups. Either don’t use them or recreate the group without Verdana. It has a significantly larger x/y ratio than any other font it is grouped with which will lead to significantly different text sizes if another font is substituted. The following is shown first in Verdana and then in Arial the most commonly substituted font then Times New Roman which is what you will get if there is no font family group on most browsers.

This is the sample text being used.
This is the sample text being used.
This is the sample text being used

You can see the significant font size differences between each font yet each uses the same font-size setting. The difference is purely in the x/y proportion of each font.

I’m going to recreate the last font family group without Verdana in it so you can see how to create a font family group. Scroll to the bottom of the Select font family box so you can see the group “Verdana, Geneva, Tahoma, sans-serif” to see what we will recreate.

add-font-tahoma-wcomma_thumb1The font list is in alphabetical order and should show all the fonts installed on your computer. Since I have Adobe Creative Suite installed my list of fonts is probably longer than yours. Scroll down until you see Tahoma and click on it to add it as your first font.

Tahoma is on all Windows computers and any Mac with Microsoft Office or other Microsoft product installed. For that reason I like to put it first.

Before you select the next font it is very important that you return to the Add font box which now has Tahoma in it. You must add a comma and a space before you can add another font to the list otherwise it will replace your selection of Tahoma with the next font you click on in the list section.

no-geneva_thumb1Next scroll down to the G section of the installed fonts list. You will see that Geneva is not on the list even though it is in the original font family group created by Microsoft. This is because It is a Mac font installed on all Apple computers and devices but must be purchased if you wish to use it on a Windows computer. This is why you will use font families instead of specifying a single font. The size and general appearance of Tahoma and Geneva are similar so the page will not look dramatically different but will take advantage of system specific fonts.

add-font-sans-serif_thumbSince Geneva is not on our installed fonts list to choose from we will need to return to the Add font box and type it in after Tahoma. This is why I recommended scrolling the Select font family box to the end so we could see the font family we are recreating without Verdana. That way you have the Mac font name and spelling to reference. After you finish typing in Geneva with a comma and space after it we’ll add the generic font family by scrolling down to sans-serif. Both Tahoma and Geneva are sans serif fonts so if neither is available we want the browser to substitute whatever is the default sans serif font set on its system. Typically that would be Arial which has a similar x/y ratio.

Always set a default generic font family so that if none of the fonts you specified are available the visitor will get something in the same family. Generic font families are sans-serif, serif, monospace, cursive and fantasy, each of which is shown as bold in the font list.

remove-font-family_thumbOnce you are finished by adding the generic font use the Add button to put your newly created font family group in the list. After which you can remove the Verdana, Geneva, Tahoma, sans-serif group. Create or remove any other groups you may want.

These are the Page Editor Options I feel work best but your workflow may be different if you choose to use different ones.


Outstanding Hosting