Google Web Fonts in Serif WebPlus

Google Web Fonts

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 Says:

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.

Getting Started

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 Fonts

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.

fold-left fold-right
About the author
Neil Judges enjoys creating, experimenting and sharing new techniques he discovers. Neil especially loves Serif Software and is on a mission to spread the word of this highly capable and inexpensive design suite. As well as this website he also runs Serif Addons and Serif Templates.

36 Replies to Google Web Fonts in Serif WebPlus

  1. eduardo says:

    Hi
    Neil, i followed the instructions and it doesn’t seem to work. I added the webobject – html to the page that im trying to use the font is this okay? or do i need to add the font code to the master page?

    Thanks

    • Neil says:

      Hi Eduardo,

      If you’re using the font on a couple of pages in your site you should add the code to the master page to save problems if you decide to use it on an additional page but forget to add the code. If you only use the font on a single page I’d still be tempted to add the code to the master page, again to prevent problems ;)

      Thanks

  2. MX says:

    This example does not work. It appears that more CSS code is required to make it work.

    • Neil says:

      Hi,

      Which part isn’t working for you? Can you provide an example page so I can take a look to see where you may be having troubles?

      Thanks

  3. Claire says:

    Hi there,

    On the google fonts website you have to add the font to the CSS, but on your tutorial you do not mention this – just wondering if this is required please?

    Thanks, Claire.

  4. Tim Veach says:

    I cannot get it to work either. How do I get the text to be formatted as the new Google Font? It does not show in the font list????

    • Neil says:

      Hi Tim,

      Do you mean that the font doesn’t show in the font list in WebPlus. If you 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.

  5. Markeschell says:

    You rock neil. This is very helpful!

  6. Dennis says:

    Works like a champ. Finally nice fonts to work with! Thanks.

  7. Dennis says:

    Works great in Chrome.
    In IE I got into trouble when assigning more font-styles like:

    It did not show correct in IE. I went back to one style. That works. But there’s no option other than the ‘normal’ letter. That’s a pity. I think the problem lies with google.

  8. Dan says:

    Hi Neil,

    I hope you are well. I am having some trouble with Google web fonts on my site. I want the whole Open Sans font family on my site (it has ten styles i.e light, bold, extra bold and so on). I have installed the fonts onto my systems and used the google generated code and pasted it to the head of the site. However only the normal style works.

    I have uploaded a test site showing the fonts to http://www.dancurtis.me for you to see what the browser is displaying.

    This has always worked fine, just not on font families / styles.

    Any help would be amazing!

    • Neil says:

      Hey Dan,

      All good here thanks :)

      It looks as though you’ve checked the boxes for the right font styles except for the ‘Open Sans Extra Bold’ you’ve got ‘italics’ selected. I’m not sure why the others aren’t displaying as they look to be the right ones. All I can suggest is to experiment by first selecting all of the font styles from the Google site and checking they all display. I’ve not delved in to the subsets but it may be worth looking in to.

      Hope that helps.
      Neil

  9. Mike Williams says:

    I’m using WebPlus X6. The Google web fonts do not work, even after following your instructions to the letter. The font appears in my normal system fonts folder and it appears in the fonts list in all applications, including WebPlus X6, and the font shows correctly in the WebPlus projects itself and it also shows correctly when the finished html file is run. However, the font fails to work when I run the html file on a different machine, or even on my own machine if I uninstall the font.

    I’ve pinned this problem down to the “http://www.w3.org/TR/html4/loose.dtd” part of the <!DOCTYPE line (the first line in the html file). If I remove that part of the line, so that the <!DOCTYPE line simply reads "” then the Google web font works and displays correctly on all machines. This is not a suitable fix for the problem though, because removing the “http://www.w3.org/TR/html4/loose.dtd” part of the <!DOCTYPE line causes errors in the behaviour of the webpage (for example pages that are set to show centred actually show on the left, and I assume there will be other problems as well).

    So, my question is how can the problem be fixed in such a way that the Google fonts work correctly when the html page is displayed on machines other than the design time machine without causing the other page error I mentioned. Any ideas?

    Mike

  10. Mike Williams says:

    . . . a bit of a typo in my last message. The second sentence of the penultimate paragraph should have read . . .

    If I remove that part of the line, so that the <!DOCTYPE line simply reads . . .

    So, I had to remove /only/ the “http://www.w3.org/TR/html4/loose.dtd” part in order to fix the Google font problem (although, as I said, doing so causes other serious problems in the web page).

    Mike

    • Neil says:

      Hi Mike,

      I wouldn’t recommend changing the Doctype, there were instances in WebPlus X4 where it was necessary due to X4 running pages in Quirks Mode, but I’ve not had the need for it since Serif updated the Doctype in X5.

      Can you provide a link to the page so I can take a look?

      Thanks
      Neil

      • Mike Williams says:

        Hi Neil

        Thanks for your quick response. As it turns out, the act of uploading an example to my website so that I could provide you with a link to it actually caused me to discover the cause of the problem (which in fact turns out not be be a real problem at all !). When viewing the page in the normal way from an external website the Google fonts work fine.

        After further tests it turns out that the Google fonts fail /only/ when the page is viewed on the local machine (such as for example double clicking or right clicking the index.html file in the Published folder on the design time machine) even though there is a fully working Internet connection. Also, it fails under those conditions /only/ in IE9 (tested both in Vista and Win7) and it works okay in Safari, FireFox and Chrome.

        I’ve been playing about with designing web sites for only a few weeks and It just so happens that I normally test the website locally from the ‘Publish to Disk’ folder as I design the project, uploading it to a server only occasionally, which is why I came across what at the time I thought to be a seruious problem with Google fonts, but which on reflection turns out to be okay.

        Thanks again for your response. Sorry to have misled you.

        Mike

  11. Bob Butler says:

    Thanks Neil, It worked Perfectly… Downloaded the font, installed it to my machine, inserted the code in the header of my page and it worked in Explorer, Firefox and chrome… Been using Webplus for 3 years and this has always been a issue, glad to have a simple solution that works right in design..

  12. Dominic says:

    How Neil,

    Am new to adding css to web plus is there any tutorials that will help me understand how to integrate it into webplus.

    • Neil says:

      Hi Dominic,

      It really depends what you’re trying to do. Why not drop into the Serif Forum and ask for help there as I don’t know of any tutorials specifically aimed at adding CSS only :)

  13. Adam says:

    Hi Neil,

    Thanks for this post.. its really great.. just one question if thats okay.. followed it through, and all works well apart from I have two different google fonts in my site.. and when I drop the code from google in.. one works fine, but the other one dosent .. any suggestion? Thanks

    • Neil says:

      Hi Adam,

      I’ve not heard of any issues with multiple fonts. Can you provide a link? It may be worth double checking the code you’ve added to the to make sure there’s no issues there :)

  14. Adam says:

    Hi Neil,

    Much thanks for the reply.. I got it sorted ;) Cheers

  15. Happy says:

    Hi Neil, I follow your tutorial , but pheraps i get some wrong thing…

    1 – Choose Roboto font on google font website and i download the code ()

    2 – I download the family font from dafont (Roboto) and i install it on my pc…

    3 – i open webplus X6, I create a new site (only one page for test), I insert an HTML Fragment into the page and paste to head the google code.

    4 – I create an Text frame wit the the text frame tool and i wright something inside of it.

    5 – I select Roboto font from the font list (choose font menu)

    6 – I wanna use the font also in a javascript dropdown menu (but now I’ll try only the text frame)

    7 – all seems perfect!!! so I publish the site, but the font is WRONG!!!!!

    You can see my proof here…

    http://www.dvdesign.it/ftp/aaa/index.html

    DAMN…..WHERE IS THE ERROR?
    Can u send to me (or publish) a webplus file (only one page) and the relative familyfont to install?

  16. Happy says:

    EUREKA…..!!!!!!! Now it’s all right!!!!
    I’ve used the Yanone google font also into the js navbar.
    It’s perfect and wonderful!!!
    1 – download Yanone-Kaffeesatz.zip
    2 – install the font onto the pc (Win XP Professional :control panel ->font)
    3 – open webplus 6 and place into the masterpage an HTML Fragment
    4 – paste to head the google code
    5 – Use the font normally…select the text, choose Yanone from the dropdown menu …
    That’s all!!!!
    Thanks to Neil

    • Neil says:

      Excellent! Thanks for the update. I wonder if it may have been down to the way WebPlus was rendering the Roboto font and giving it a style weight that you weren’t including in the code, hard to say as your test site’s gone now. No worries though, just glad you’re up and running with it :)

  17. Greg says:

    Hi Neil,
    I was looking for your olsd tutorials, where can I find them? Nivo, scroller itp?
    Thx
    Greg

  18. Shaun says:

    Hi Neil

    Thanks for this tutorial. My clients have asked me to use prettier fonts then the recommended web safe fonts in WebPlus. This tutorial has therefore been very helpful.

    Thank you

  19. Tyler Pierce says:

    Hello Neil,

    I followed your tutorial exactly and for some reason I cannot get the right text to display on my website.

    My website is tylerspierce.com

    Thanks,
    Tyler

    • Neil says:

      Hi Tyler,

      Looks like you’re doing everything right, the problem may be WebPlus as it is naming the font Roboto Thin and Roboto Light in the CSS:

      .Artistic-Body-C-C0
      {
      font-family:"Roboto Thin", serif; color:#878787; font-size:21.0px; line-height:1.33em;
      }
      .Artistic-Body-C-C1
      {
      font-family:"Roboto Light", serif; color:#ffffff; font-size:21.0px; line-height:1.33em;
      }

      If you look at the code required by Google it must be like this:

      font-family: 'Roboto', sans-serif;

      Therefore the CSS generated by WebPlus is not being recognised unless you use just the standard Roboto and not the thin or light.

      Unfortunately there isn’t a way to force WebPlus to use another style name in its CSS.

      Hope that helps

      Neil

      • Tyler Pierce says:

        I kind of figured that was the issue when I was trouble shooting last night. Any suggestion as to how I can use the Roboto thin font and make it work?

        • Neil says:

          Unfortunately not, like I said there is no way to force WebPlus to use another style name in its CSS. You could try editing the font properties (the one installed in Windows) to see if you can manipulate it that way, but I’ve not tried or have any experience with it so couldn’t help there.

          What about Lato light as an alternative?

Leave a Reply