It’s most likely, at some point, you’ve been designing a website and found yourself looking at the huge choice of non-websafe fonts in the font selection dropdown in WebPlus, wishing that you could use one of them to give your site some modern typographic awesomeness that all the cool kids are using. Yeah, you can use them, but who’s to say your users are going to have that font installed on their computer, if they don’t, their browser will substitute it for something like Verdana and the layout will look like its been designed by a toilet graffiti artist. You could always convert the text to a graphic, but that’s no good for Search Engines or load times for that matter.
So, what can we do to get around this without jeopardising page download speeds or SEO? Well, thankfully Google have a growing collection of fonts at our disposal that allow us to display non-websafe fonts on our websites safely, without much chance of the layout getting screwed up. It works by delivering the font to the users browsers via a small line of code added to the HTML of your website.
Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.
Firstly, you’ll need to get yourself over to the Google Web Fonts library and trawl the huge number of fonts available for something suitable for your websites style and theme, click on ‘Add to collection’ as you go. Once you’ve found the fonts that you plan to test or use, click on ‘Download your collection’ in the top right of the page. Google will give you a warning to say there’s no need to download, but for it to work well in WebPlus it’s necessary.
Install the Fonts on your computer – There are many different methods depending on your operating system, dafont.com sum it up well in their FAQ: http://www.dafont.com/faq.php
Design in WebPlus
If you’ve had WebPlus open during the Font installation process, you’ll need to close it then re-open for it to recognise the newly installed fonts.
Get to work using the Google Fonts throughout your website as you would any other font, don’t go overboard though, less is more.
Add the Code
All that’s left to do is add the code from Google Web Fonts API to the <head> section of your websites HTML.
Head back over to Google Web Fonts and select ‘Quick use’ for the font you have used in your site. You’ll have the option to select additional boxes such as italics or bold if you’ve used those styles in your site, if not leave them blank as selecting them will slowdown load times. It’s worth noting if you have used italics in your site and the option isn’t here to use italics it’s best to remove the styling from your sites text.
The code should look something like this:
<link href='http://fonts.googleapis.com/css?family=FONT NAME HERE' rel='stylesheet' type='text/css'>
Copy the code associated with your selected font to your clipboard and in the WebPlus workspace, for WebPlus X5 users, click Insert > Web Object > HTML > Paste to Head. For WebPlus X6 users, click Insert > HTML Code Fragment > Paste to Head.
That’s it! Test your site on a computer that doesn’t have the font installed to see how it looks.