thinking outside the box

Web Fonts and Google Fonts Tutorial

XARA TUTORIAL

Text here...

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 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. multiple font styles 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.   Live preview - 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 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 the 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 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).

Font name               Font size                 Text style                

Four sections of the font menu