Using Google Fonts on your DecoNetwork website

Fonts are a quick and simply way to give your website that special or unique touch. But as you know you can’t just use any font on your website as the person browsing your site must also have that font on their computer to see you website properly. Therefore we end up with a fairly repetitive cycle between common or “safe” fonts such as Arial, Verdana, Times, Georgia, Trebuchet MS and heavens forbid the dreaded Comic Sans MS.

Safe, but boring. But now you can be creative and safe at the same time with an awesome service from Google called Google web fonts. Best of all it’s free!

Google web fonts let you use a great collections of fonts to improve your website. No worries about downloading, installing, distributing or even copyright violations. And they have great support for various website browser including:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+
Using a Google web fonts can turn an average menu:

;to something a little special!

Google web fonts can add that little flare to your site and allow you to match key elements such as menu, headings and website buttons to the fonts used in your logo and branding.

So, how to use them in DecoNetwork?

Simple!

1. Head to http://www.google.com/webfonts and find the font you like. There are various tools to search and filter by.

2. Once you’ve located your font select Quick-use:

3. Scroll down to step 3 “Add this code to your website”:

4. Select and copy this line of code.

5. Log into you DecoNetwork website and browse to Manage Store > Appearance > Customer Template HTML.

6. Select the Custom Layout tab and check ‘Override default layout

7. Paste the <link> code just before the </head> tag in the custom HTML layout. i.e.:

<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
</head>

8. Select Update to save your changes.

The font is now ready to used in you CSS.

Identify what areas of your site you want to use the font for and update your CSS.

9. Back on the Google web fonts page scroll down to step 4 “Integrate the fonts into your CSS”.

10. Select and copy this line of CSS.

11. In your DecoNetwork website browse to Manage Store > Appearance > Customer Template CSS.

12. Select the Create Custom CSS tab.

13. Enter the CSS selector you want to modify (in my example for the menu it was #navigation li a) and paste in the CSS. i.e.:

#navigation li a {
font-family: 'Berkshire Swash', cursive;
}

You may also need to adjust the font size (font-size) and letter spacing (letter-spacing) to improve the font’s display. i.e.:

#navigation li a {
font-family: 'Berkshire Swash', cursive;
font-size: 16px;
letter-spacing: 0.02em;
}

14. Click Save CSS to save your changes and you’re done!

Have fun playing around with some fonts but as always with making visual changes to you website I recommend you make the change on a test affiliate store first to ensure you are happy with your changes before you apply them to your live selling website.

Happy Deco’ing! 🙂

Share:
4 Comments
Avatar
Celine January 8, 2013

Hi! This is really useful info, thank you! I really love the font on the word "Fonts" in your Google Font Banner. Would you please tell me the name of it? thank you so much!

Avatar
Brandon Samuel November 25, 2012

Thats pretty cool! All this time had to use images and or boring fonts! Thanks for the info!!

Scroll to Top