How to Change the Fonts and Text Colour on Your Website using BlueGriffon

Switching Fonts, Using Bold and Italics, and Changing Text Colour

by Christopher Heng,

One of the things you may want to do as you develop your website is to modify the appearance of the text on your web pages.
For example, you may want to use a different font for the words, or you may want to put some text in bold or italics.
Or perhaps you may even want to change their colour (“color” if you
use US English).
This chapter shows you how you can do these things using the BlueGriffon web editor.

Please note this is the third chapter of the
BlueGriffon tutorial series.
If you are not familiar with BlueGriffon, you may want to start from
chapter 1 since I will
assume that you already know the things that I’ve covered in the previous chapters. In addition, if you are completely
new to web design, it may be best to begin with the article
How to Create / Make a Website.

Goal of This Chapter

By the end of this chapter, you will be able to change the appearance of the text on your web page.
This includes changing fonts, using bold or italics, and modifying the colour of the text.

How to Change Fonts and Use Bold or Italics

  1. Select the text that you want to place in a different font. To do this, drag your mouse over the text to highlight it.
    For those who have forgotten what “dragging your mouse” means, move your mouse pointer so that it is just before the
    first character of the text to be selected, then click your left mouse button. Continue to hold down that
    button and move your mouse over the other words on your page till you reach the end of the portion you want to change.
    As you move your mouse, you will notice that the text is highlighted, indicating that it has been
    selected. Release your mouse button when you reach the end of the snippet you want to modify.

  2. As soon as you release your mouse button (and perhaps even while you’re dragging your mouse), BlueGriffon will pop-up
    a small window. This window disappears after a while, and will also disappear if you perfom any other action on
    your page. It’s actually possible to change fonts and do other things with your selection directly from this window,
    but since it’s transient and may disappear before you can use it, we will ignore it for now and use
    a different method to change your fonts. In other words, if you see this pop up window, just ignore it. (You don’t
    have to do anything to it. Just pretend it’s not there. It’ll go away by itself.)

    Those who are observant will have noticed that most items in that pop-up window can be found in the three toolbars
    near the top of the BlueGriffon window. In particular, the “! !! C B I U” characters can be
    found in the 2nd row of toolbars just under the menu bar. The drop-down box containing the words “Variable width
    can be found in the 3rd row (if you count from the top).

    To put your selected text in bold, click the “B” button on the toolbar. To put it in italics, click
    the “I” button. In fact, as you will probably remember from chapter 2, you can hover your mouse pointer
    over any of those buttons to get a pop up tooltip with a short description of what the button does.

    To change the font of the selected text, click the drop down box that currently says “Variable width”. If none
    of the drop-down boxes say “Variable width”, move your mouse pointer over every drop-down box till you come to
    one that has a tooltip of “Choose a font”.

    The drop-down box will expand, showing you all the fonts that are currently installed on your computer.
    Beware, however, of choosing unusual fonts
    that only you (and a relatively few people in the world) have installed. When you use a certain font on your
    page in this way, your font does not actually get uploaded to your website. All it does is
    to insert the name of the font you choose into your page. If you specify a font that your visitor does not have,
    their web browser will display your page in some default font (typically Times New Roman).

    If you want to choose fonts that the majority of computers in the world have, select one of the 3 entries in the
    2nd section near the top of the drop-down menu: that is, the section that says “Helvetica, Arial”, “Times New Roman”
    and the “Courier”. These are standard font selections that webmasters regard as safe bets since they are present
    on all Windows and Mac computers.

    By default, your page uses “Arial, Helvetica, sans-serif”. That is, if your visitors have the Arial font on
    their computers, the text on your page will be displayed in that font. Failing that, your page will be shown using the
    Helvetica font (which looks like Arial to the untrained eye). If even that is not available, the web browser will use any
    font available on that person’s computer. This is the same series of fonts that uses on its pages
    as well, since it produces the same appearance (font-wise) on nearly every Windows and Mac computer in the world, and
    creates an acceptable equivalent on Linux computers as well.

  3. The moment you choose a font or click “B” or “I“, your text should immediately change its

How to Change the Colour of Your Text

If you want to change the colour of your text, you will have to use the pop-up window that you previously ignored
in the section above.

  1. Select the text the same way you did earlier.

  2. The pop-up window will appear when you complete your selection. This time, don’t ignore it. Notice that there are 2 circles
    at the rightmost edge of the pop-up window. If you hover your mouse over the left circle, you will see
    a tooltip that says “Foreground”. Clicking this circle will open a colour selection dialog box. Click the colour
    you want, followed by the “OK” button. The text you selected will change colour immediately.

    Incidentally, the right circle in the pop-up window allows you to change the colour of the background behind
    your text. However, this will only change the background of the part of the page containing the text that
    you have selected, so don’t use this method if you want to change the background colour of your entire page. I
    will show you a different method of changing the background in the next chapter.

    For those whose reflexes are slow, and the pop-up window disappears before you can click the “Foreground” circle,
    just select the relevant piece of text again. This will cause the window to appear again. Yes, I know, a transient
    pop-up window is not ideal for beginners who are not accustomed to how things work (or those with physical handicaps),
    but as far as I can tell, there is no other provision in BlueGriffon’s graphical user interface (at least in version 1.5.2)
    for the beginner to invoke the colour picker. That is, the foreground and background circles do not appear in the toolbar
    the way the font selection does.

Save, Publish and Test

When you’re through with your modifications, save your page, start up FileZilla,
and publish your index.html page as you did in the previous chapters.

As you should always do when completing a chapter in this tutorial series, start up your web browser and visit your
website to make sure that your web page appears as it should. This will allow you to see if your site actually
appears correct in a real web browser. Don’t rely on the appearance you see in BlueGriffon (or, for that matter,
any other web editor); the primary
function of a web editor is to help you design web pages. They are not full-fledged web browsers and do not behave
100% like a web browser.

If you have used a font other than the default font, or one of “Helvetica, Arial”, “Times” or “Courier” in the “Choose a font”
drop down box, see if you can
get access to a different computer and check your website on that machine as well. By “different computer”, I mean a computer
using a completely different operating system. For example, if you are using a computer that runs Windows, try to find
a Mac and check your site there. If you are using a Mac, get access to a Windows machine and test your site from there.
Be warned though that this doesn’t guarantee that your site will appear the same on all computers, since it’s possible
that those two machines just happen to have the same extra fonts installed.
(This is not as unusual as you may think; certain software, like Microsoft Office, install extra fonts onto the computer.
If both computers have the same version of Office, they will have those same extra fonts that other machines don’t have.)

Next chapter

In the next chapter, you will find out how you can change the background of your web page, either by additing
background images or by changing its colour, or both.

I’m currently in the process of writing the next chapter. If you want to be informed when the chapter is published, please
subscribe to’s news feed.
It’s free, and no email address or other information is needed. Read
this article if you don’t know how to do it. Another way is to manually check’s home page from time to time. I announce all
new articles in the “What’s New” column of that page.

Copyright © 2012 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from

Do you find this article useful? You can learn of new articles and scripts that are published on
by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at
You can read more about how to subscribe to
RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce this article in whole or part, in any form,
without obtaining my
written permission.

It will appear on your page as:

How to Change the Fonts and Text Colour on Your Website using BlueGriffon

Copyright © 2012 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 12 September 2012.

See original article:  

How to Change the Fonts and Text Colour on Your Website using BlueGriffon