Make stunning sites using Google fonts

Beautiful Web design (for beginners) with Google Fonts

Regardless of whether you have a blog or an eCommerce store, having a beautiful website will lead to an increase in conversions, because people trust professional looking sites more.

Even though there are a few examples where unattractive site design has not prevented a business from becoming popular, good Web design makes better financial sense.

So why not make the effort?

And, now that Google provides an intuitive online fonts service that is freely available to the public, looking professional is easier than ever.

Google fonts makes beautiful Web design easy

This article will talk about what Google Fonts is, and how to use it to improve the look and feel of your website.

About Google Fonts

Google Fonts is an online resource that contains a categorized database of fonts that can be integrated into any website.

The font files themselves are unfortunately pretty large and cumbersome, so this limits the amount of fonts you can import into a site - otherwise, you risk slowing down page load times.

But, as Google points out, once someone has browsed a site that uses the same font(s) included in your site, their browser can use the cached version and it is not necessary to download the font files again.

Over time, hopefully, using Google fonts will not impact on the speed of your site in any significant way.

For now, it is probably best to pick one Google font that will be used over the majority of your website, and use standard Web safe fonts (like Arial, Verdana, Helvetica, etc) if you need variety.

How to add Google fonts to your website

To add a Google font to your site, follow these steps:

  1. Go to Google Fonts
  2. Find a font that you would like to use on your site and click the blue "Add to collection" button, like this:
    Adding a new Google font to your collection
  3. Next, you can choose the styles to include with the font download. Be careful to keep the size down:
    Selecting Google font styles from your collection
  4. Scrolling down the page, you'll be able to choose a method of importing the font CSS. Often, the easiest way is to simply copy and paste the link declaration into the <HEAD> section of your site:
    Embedding a Google font using link
  5. Once you have copied and pasted the link code, your header section (in the HTML code of your website) should look something like this:
    Google fonts CSS link in page header HTML

With the font CSS included in the site, it is available to use in your CSS code.

Don't panic if you don't know anything about CSS. All you need to do in order to see the new font in action is:

  1. Find your site's CSS file(s)
  2. Open it for editing and search for the phrase font-family. You should see something like:

    body {
    font-family: Verdana,Helvetica,sans-serif;
    ...
    }

  3. Change the font-family CSS declaration to include your new Google font. In the case of SME Pals, we made the following change to the font family:

    font-family: Raleway,Verdana,Helvetica,sans-serif;

    Remember to swop the new font name (shown in bold above) with the name of the one you are using.

  4. Save the changes and refresh your browser. If there is no change visible, you may need to clear out any caches your site has first.

The above instructions use the body declaration as an example. This will change the font across your whole site - unless a particular piece of content has its own font-family styling.

However, you can apply a font style anywhere you like - it doesn't have to be site wide in the body declaration.

Pretty easy, huh?

It's a good idea to play around with different fonts to get a feel for what's on offer, and whether or not the style fits your site.

Drop a comment to let me know what you think of Google Fonts, and share your tips and experiences (hopefully positive ones) around how beautiful fonts can contribute to your site design and ultimately help market and grow your business.

Weebly website builder

Here's a quick step-by-step, beginner's guide to building a website (for free, or very little cost) using one of the world's best website builders - Weebly.

The reason I chose Weebly to create a website is because hosted website builders, like Weebly, are easier to use than alternative Web design methods for small business - such as content management systems (CMS).

For small and home business startups, or traditional businesses without solid Web design skills and experience, a good website builder is the natural choice to create a professional website quickly, and cheaply.

Looking for the ultimate guide on how to start a blog or website with WordPress? Follow the steps in this guide to build a blog or small business website (including themes, hosting, design, & more) quickly and easily.

From a business perspective, it is important to keep blog or website design and development times short so that you can focus on getting traffic and making money.

Managing 404 server error response pages

Well managed 404 "file not found" errors can turn potential problems into great opportunities that help you get the most from Web traffic that might otherwise slip between the cracks.

Even if visitors are trying to find content that no longer exists, a good 404 error page can direct them to the information they are after and lead to a conversion - just like any other good landing page.

Makes sense right? Just because a visitor is after a non-existent page (perhaps they have been directed to a mistyped URL from another site) doesn't mean we can't try give them what they're after anyway.

drupal links how-to

Creating internal hyperlinks in Drupal, from one page to another, can be slightly tricky - node IDs, path aliases, the Drupal url() function, all play a role.

Fully qualified links, those that contain the entire address including http, are easy enough to use, but it's not good practice to enter a static, fully qualified URL when linking from one page or blog post to another.

Fully qualified links, by definition, include the domain name. If that changes all these links break, and, if the site is substantial, it would require a lot of work to fix everything.

Luckily there is a better way...

Web design mistakes that can be fixed (unlike spilled milk)

Good Web design is important for success online, but big companies implement bad design all the time.

Basic HTML code for bloggers and newbies

Having a basic knowledge of HTML (HyperText Markup Language) can be a huge help for bloggers, online entrepreneurs, or anyone who might be asked to

Learn how to change your blog or website domain name without losing precious Google traffic, PageRank or SEO juice.

website builders overtake cms

Drupal & Joomla are two popular CMS systems that offer powerful Web design and development features, and both have recently been overtaken in popularity

inset text effect with css

Inset text can make your Web design look beautiful, and while it is cutting edge, it's also super easy for beginners to implement using CSS and a bit of HTML

How to add Getresponse email marketing to your store

One of the key factors in the success of any eCommerce site is great marketing - and email is one of the most effective of all Internet marketing strategies.

Old HTML tables can be upgraded into a responsive design with CSS3 and media queries

Mobile first, responsive Web design is something that can't be ignored because devices likes tablets and smartphones are quickly becoming the dominant browsi

Our goal is to provide you with free, unique tips & insights into the world of small business. To support ourselves we use ads and affiliate relationships. We may, or may not, earn a small commission (at no cost to you) as a result purchases you make via links clicked on SME Pals.