News, Inspiration & Stories about our Multimedia Software

Using Fonts on your Website

Fonts and websites can be a confusing topic with web fonts, ‘web safe’ fonts, embedded fonts and Google fonts. Font technology has evolved significantly over the last few years, but if anything, it adds to the confusion. This article attempts to explain the different fonts that can be used in websites.

finished page 3

If you don’t already own Xara Web Designer then download your free trial. Fortunately, Xara Web Designer hides the technical details and complexity of font embedding and downloading Google Fonts so you will find that learning about fonts for your website will be easy.

The Text Tool (the big T icon) is used to control your text and fonts. It offers all the usual word processing facilities including paste text from the system clipboard and a spellchecker. Text editing is similar to any word processor, for example, drag to select text, double click to select a word and triple click to select a whole line – which can be useful for selecting all the text in a button. The InfoBar provides a wide range of controls for this tool:

Click on the down arrow alongside the font name to display the full font menu. It is split into four sections. The top section shows fonts already used in the document, the second section shows ‘web safe’ fonts, the third section shows available Google fonts, and finally the lower section shows all fonts installed on your computer. Each font name is displayed using its own typeface, making font selection easier.

The Font Menu

The Font Menu

Those fonts for which multiple font styles are available are shown with small black triangular arrows against them on the right hand side of the menu. Simply hold the mouse pointer over such a font name for a second or two and a small sub-menu appears to the right of the main menu, listing the available variants of that font. While this sub-menu is displayed, you can move the mouse pointer over it to select the desired font variant.

Live Font Preview

Select some text and as you move the mouse pointer over any font in the font menu, the selected text in the document is instantly updated to preview the font. This is not a permanent change until you actually click to select the required font. This is great for very rapidly previewing large numbers of fonts. To quickly access a font you can type the initial characters of the font name, and the menu will be scrolled to that section of the list, for example. if you type “ver” it will instantly scroll and locate the Verdana font.

Changing the font for the date and time

If you hold down the “Shift” key while traversing the font menu, then the font selection is not updated instantly, there is a short pause before it is updated. This is useful if you find that instant preview slows down your traversal of the menu (perhaps if you have a large amount of text selected).

To see a live size preview, run your mouse over the list of font sizes (second drop down menu on the InfoBar). Next to the font size menu is a small pop-up slider control that provides a direct, live font size control which will adjust the font size of the selected text in real-time as you drag the slider.

Web Safe Fonts
This small set of fonts are safe to use in websites because the vast majority of computers and other devices (e.g. iPads and other tablets) will have these fonts installed, so they will display accurately for your website visitor. As you see below this is a small set of fonts.

Web Safe Fonts

Web Safe Fonts

Embedded fonts

Until relatively recently these web safe fonts were the only ones you could use on a website, but that situation has changed with modern web browsers and it’s now possible to embed your own fonts into your website (along with HTML and graphics files) and the browser will know that it should use those fonts. This provides a dramatic leap forward for web designers. Xara Web Designer is the first web authoring tool to make the use of most fonts as easy as just selecting the font.

Select any font from the Font menu and Web Designer Premium will automatically publish the font with your website so that text using that font will appear correct to everyone viewing it, whether or not they already have that font installed.

When you export or preview a website document that uses fonts that aren’t web safe, Web Designer Premium will show you a list of those fonts that will be embedded in your website.

Preview dialogue showing the fonts used on the web page

Preview dialogue showing the fonts used on the web page

Note: not all fonts may be embedded in this way – some fonts have a ‘no embed’ license. Web Designer Premium will detect those fonts that do not permit embedding in a document or website and will show you an alert. You should change to a different font that is either web safe, a Google font or a font that does permit embedding. However, you can continue and publish with the restricted font if you are sure that your use of the font is within the terms of the font’s license (for example, in a website that is only for your own use).

Google Fonts

Web Designer Premium gives you the option of using any of over 600 Google fonts. These are free, open source fonts that have the advantage of being hosted by Google so the visitor’s browser will automatically fetch the fonts from the Google high performance font hosting servers

Normally it would be necessary to download and install the required Google fonts on your computer, but Web Designer Premium does all this for you. In addition rather than expecting you to browse the 600 Google fonts, Web Designer Premium has made the selection process easier by providing a Font Finder so you can browse and search through a categorised font list with a live preview.

To start using Google fonts simply click Add on the font menu to pull up the Font Finder.

Google Font Finder showing some of the available fonts and font families.

Google Font Finder showing some of the available fonts and font families.

You can search for fonts by typing the font name into the search box, or scroll down through the list to find a suitable font. Qualify your search by selecting font styles from the checkbox lists on the left and use the live preview slider to see the font at different sizes.

Selection of Google Fonts

Selection of Google Fonts

Click on your chosen font and you will be asked if you want to download and install the selected font. On many Windows computers, and depending on your Windows settings, you’ll be prompted by Windows to give permission for the installation, which is performed by a separate FontInstall program that is launched. Once downloaded and installed, each font will then appear in the Google Fonts section of the font menu.

Google Web fonts are not just web fonts – they are normal Windows compatible TrueType or OpenType fonts that can be used by any application on your computer, for example, print documents such as PDFs,.

Note: some browsers do not render Google fonts as effectively as others, so it’s always a good idea to test your web pages with a variety of browsers to ensure the font quality is acceptable.

High Quality Body

If you’re mystified by the category called ‘high quality body’, these are fonts that have been hand picked by Xara as the best quality ones, especially at small type sizes (commonly body text), and have been tested against all the main web browsers.

Graphics or Text?

Web Designer had, and still has, a very simple method of turning any text into a graphic – you just group the object (even if it’s just with itself). This is still the preferred method for small amounts of text that use different non-web-safe fonts. However, the main benefit of using an embedded font, as opposed to turning text into graphics, is that it’s search engine friendly, i.e. search engines can see and index this text. Users can also select and copy this text, like any normal text in a web browser.

Headline

An example of an unusual Google font (Akronim) with a subtle soft shadow applied in Web Designer. Previously this would have to be a graphic, but now this is simple HTML text, using CSS3 text shadows.

Performance

One point to keep in mind is that using a lot of embedded fonts, either your own or Google Web fonts will slow down your website, because the browser has to download not just the website HTML but also the font files, in order to show everything correctly. Therefore, stick with just a few web fonts (which is good design practice anyway).

Xara Web Designer is an easy template based solution that gives you total page design freedom – no HTML skills are required. Web Designer includes customizable web graphic, web page and website template designs plus tools for creating your own designs, for photo editing (an integrated ultra-fast, non-destructive photo tool), and for advanced text layout. The Designs Gallery also includes a collection of Widgets. Site upload is covered too and there’s even a free web hosting offer!

It is available in 2 versions, Web Designer and Web Designer Premium; Premium offers advanced web design features.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *