How to Change Fonts and Customize the Text on Your Web Page with BlueGriffon 2.x

Chapter 3: Using Bold and Italics, Changing Fonts, Text Size and Colours


How to Change Fonts and Customize the Text on Your Web Page with BlueGriffon

by Christopher Heng, thesitewizard.com

Among the things that webmasters want to do when customizing their website is to change fonts, use bold and italics, adjust the font sizes and perhaps even use a different colour ("color" in US English) for the text. This chapter shows you how you can do these with BlueGriffon.

Since this is the third chapter of the BlueGriffon tutorial, I will assume that you have done the things mentioned in the earlier chapters. Those who don't have a site yet should probably start at the beginning, with the guide on creating 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.

Changing the Font and Text Size for the Entire Page

If you want to change the default font face and text size for the entire page, do the following.

  1. Look at the bottom of the BlueGriffon window. You should see a line at the bottom similar to that depicted in the picture below.

    Location of the tags in BlueGriffon

    The line should begin with "<body><div#tswcontainer>" with perhaps additional words following it, depending on where your text cursor is on the page.

    I shall refer to each of these elements, "<body>" and "<div#tswcontainer>" as "tags". At the very least, you should see two tags at the bottom: the "<body>" tag and the "<div#tswcontainer>" tag. Depending on where your text cursor is, you may also see other tags following these two.

    Click the "<body>" tag to select it. The entire page will be selected (ie, highlighted).

  2. Click "Panels | Style Properties" to open the Style Properties panel.

  3. Click the down arrow for the "Apply styles to" field at the top and select "all elements of same type..." from the drop down list that appears. An additional field saying "body" should appear next to it.

  4. Click the "GENERAL" line to expand that section.

  5. If you did not change the default selection in the Layout Wizard back when you created the page in chapter 1, you should see three lines in the "Font Family" field: "Arial", "Helvetica" and "sans-serif".

    When fonts are specified in this way, it means that the page will be displayed in the "Arial" font if your visitor has it on his/her computer. If not, the browser will use the next font on the list, which in this case, is "Helvetica". If even that is not available, it will look for any sans serif font it can find on that system. That is to say, it will go down the list, using the first one listed that it can find.

    To remove a font from the list, click it to select it, followed by the "-" (minus sign) under the list.

    To add a font to the list, click the "+" (plus sign) under the list. This will bring up a list of all the fonts that are currently installed on your computer (but not necessarily on your visitors' computers) from which you can select what you want.

    Unfortunately, with BlueGriffon 2.3.1, when you add a font, it is added to the end of the list regardless of which font is currently selected, making it impossible to preserve the generic "sans serif" as the last item on the list. That is, if you really want that font to be used, you will have to delete the generic font, otherwise, since the browser uses the first one listed that it can find, and every normal computer system is most likely to have some sort of sans serif font installed, your new font (listed last) will never be needed. Neither can you delete "sans serif" and add it later using the editor's user interface, since there is no way to add such generic categories (at least in version 2.3.1).

    Another thing to note is that you should be careful of adding fonts that few people in the world have, such as fonts you downloaded from some free font site on the Internet. If you do, and you don't list a fallback font that they have, their browsers will just use their default font (which varies from browser to browser and system to system).

    In general, if you can't decide, the list "Arial, Helvetica, sans-serif" is considered a safe set of fonts to use that will result in your page appearing approximately the same way on most computers in current use. It is what is used on many sites on the Internet, including thesitewizard.com.

  6. To change the text size on your entire page, click the "Size" field. A list will appear. I recommend that you either select the "%" or the "em" units of measure (ie, either the "0%" or the "0em" line). This will put "0%" or "0em" into the field, from which you can adjust the size.

    Your text as it currently stands is 100% or 1em. If you want it larger, set it to a number greater than 100% or 1em. For example, if you set it to 110%, or 1.1em, your words will be 10% or 0.1em bigger than it currently is. Similarly, if you want it smaller, set it to (say) 90% or 0.9em.

    Do not choose 0% or 0em and leave it at 0, or all the words on your page will seemingly disappear (since their size is now zero), making you think that you have accidentally deleted all your hard work. Select the unit you want, and then immediately (though without panic, since your words are still all there) change the 0 to the number you want.

  7. Click the "GENERAL" line again to collapse the section and "Panels | Style Properties" from the menu to hide the panel.

Note that even though you can see a "COLORS" line in the panel, where you can set the text colour, you will not be able to successfully change the font colour for the whole page this way, since your changes will be overridden by other settings for the individual left and right column. I will cover how you can change the colour of the entire left and right columns (both text and background colour) in the next chapter. However, if you only want to change the colour of individual words or small blocks of text (rather than entire columns), read the next section.

Changing the Font, Font Colour and Font Size for a Block of Text

The procedure below lets you change the font face, text colour and size for a block of text.

  1. Select (ie, highlight) the text you want to change. You can do this by dragging you mouse over the word or words in question. (Or you can hold down the SHIFT key while moving the arrow keys on the keyboard.)

  2. Open the Style Properties panel. You can do this, as before, by clicking "Panels | Style Properties" from the menu.

  3. Click the down arrow for the "Apply styles to" field and select "this element, through inline styles".

  4. Click the "GENERAL" line to expand that section.

  5. To add a font to be used for your selected text, click "+" under the "Font Family" field and select the font you want. The same information given above about fonts apply here too. You may have noticed that the default fonts of Arial, Helvetica and sans serif are not listed in the Font Family box. That's because they are set on the "<body>" tag (see the previous section) and not the arbitrary selection of text that you just made. Everything set for the "<body>" tag automatically applies to the entire page, unless you override it as you are now doing.

  6. The text size can also be changed using the "Size" field as before.

  7. To change the font colour, collapse the "GENERAL" section and click the "COLORS" section to expand it.

  8. Click the circle next to the "Foreground" field. The Color Picker dialog box will appear. Select a colour and click the "OK" button.

  9. Close the Style Properties panel with "Panels | Style Properties".

Bold, Italics and Underline

  1. If you want to put the occasional word in bold or italics, for example to emphasize something, first select (ie, highlight) that word or words.

  2. To put it in bold, click "Format | Stronger Emphasis" from the menu. To put it in italics, click "Format | Emphasis". Text can be underlined with "Format | Underline".

    Alternatively, you can also use the "B", "I" and "U" icons on the toolbar on the left of the BlueGriffon window. Or, if you are familiar with the usual keyboard shortcuts of Ctrl+B, Ctrl+I and Ctrl+U (or their Cmd equivalents on the Mac) used in word processing software, you can use those too. If you don't understand this paragraph, just use the menu as mentioned in the paragraph above.

Save and Test

When you are done, save the file and open it in a web browser to check the page.

Next chapter

We will deal with how you can change the background colour in the next chapter.

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

You are here:

Top » Getting Started with Your Website »

How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All BlueGriffon Tutorials »

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Change Fonts and Customize the Text on Your Web Page with BlueGriffon





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.