I was asked by a visitor how he could add web fonts (like Google Fonts) to BlueGriffon so that he could use them on his website. This article answers that question.
I will assume a few things here.
You should already know how to create a website and use BlueGriffon to design one. If you don't, please start at the beginning.
If you are not using Google Fonts, but some other font that you have downloaded from a free fonts site, make sure that you have a licence ("license" if you use a different variant of English) to place them on your website. A licence to use a font on your computer does not imply that you can distribute it online yourself.
At the time I write this, BlueGriffon supposedly has integrated support for using Google Fonts and FontSquirrel. Unfortunately, BlueGriffon 3.1 (and possibly earlier versions as well), has numerous bugs in its FontSquirrel implementation. Even when you work around its display issues, the end result is still unusable, unless you manually insert the CSS rules yourself.
As such, for this article, I will describe 2 ways to use web fonts in BlueGriffon:
with the editor's built-in facility for Google Fonts;
and a generic method for manually inserting CSS rules, allowing you to use web fonts obtained from any source (including FontSquirrel and the downloadable version of Google Fonts).
As mentioned earlier, BlueGriffon has built-in support for Google Fonts.
Click "Insert | Web Fonts | Google Font Directory" from the menu. By this, I mean that you should click "Insert" from the menu bar, and when the Insert menu appears, click "Web Fonts" from the list. A submenu will then appear. Click "Google Font Directory".
A dialog box, with a title of "Google Fonts Manager", will appear.
Click the "+" button near the bottom of the dialog box (see picture).
A new dialog box with the title "Add a font family to the document" will appear. Click the "Select a font" drop down box in the "Font-family" section, and choose a font.
You can then see some text rendered with that font in the "Preview" section. If you like what you see, click the "OK" button. Otherwise, select another font from the drop down box.
After you click the OK button, you will end up back at the Google Fonts Manager dialog box, where the name of the font you chose will appear in the list. Click OK to dismiss the dialog box.
The font is now available for you to use in the usual way. If you don't know what "the usual way" means, see How to Change Fonts and Customize the Text on Your Web Page with BlueGriffon. That is, once you add the web font using the above method, it will show up in the Style Properties panel, allowing you to select it. To see it, click the "+" button under the "Font Family" box of the "General" section. It will appear near the top of the list. Note that since you are using Google Fonts, which is an online service, your computer must be connected to the Internet for you to see and use the font.
If you prefer not to use the online version of Google Fonts, which has the side effect of depending on Google's fonts site (and giving them statistics about your visitors), you can also download the fonts you like, put them on your own website, and use the method below to enable them. The repositories for the fonts provided by Google Fonts and FontSquirrel are listed on the Free Fonts page. If you have a confidential page where only select people (eg, employees or members) are supposed to access, you should always download the fonts and host it on your own website, as described in the next section.
The manual method below can be used for web fonts that you obtain from any source. The procedure below is an abbreviated version of my How to Use Web Fonts: CSS Tutorial, adapted for use with BlueGriffon. If you want more detailed information, read that article as well.
You will also need a plain text editor for some of the steps here. You don't actually need to download and install such an editor, since Windows, Mac OS X and Linux already come with plain text editors pre-installed. On Windows, just use Notepad. (To start Notepad, click your start menu, type "notepad", and select the "Notepad" entry that appears.) Mac OS X users can use TextEdit. And Linux users can use one of the zillion plain text editors that come with the system.
You will need the editor to open and modify your CSS file. Do NOT use a word processor like Microsoft Word, LibreOffice or OpenOffice to edit this file. Do not use BlueGriffon to edit it either, since it will treat it as an HTML file, and corrupt it.
Copy the font to your website folder (on your computer). For example, if your
font file is called "thesitewizard-font.ttf", copy it into the same folder as your style sheet file.
If you have used my
BlueGriffon
Tutorial to design your site, copy it into the same directory as your home page, since your style sheet
file (named "styles.css") will also be located there.
If you want to put the file into a subfolder, make sure that you follow the best practices for naming files and folders and choose a name without spaces or capital (uppercase) letters. For example, name the folder "fonts" or "webfonts".
Start up the plain text editor (eg, Notepad on Windows) that I mentioned earlier. If you followed my
BlueGriffon Tutorial
to design your site, use the editor to open "styles.css" which can be found in the same folder
as your home page. For example, in Notepad, click "File | Open..." from the menu, navigate to your website directory,
select "styles.css", and click the "Open" button.
If you used some other tutorial to design your site, open your site's main CSS file (whatever you named it) in the editor.
Let's say that your font file is called "thesitewizard-font.ttf" and you copied it into the same folder as
your home page and style sheet (ie, CSS file).
Add the following lines to the start of the file, before any other text.
Change "thesitewizard-font.ttf" to the name of your font file. I used a
relative URL
in my example above, although you can use an absolute URL if you prefer. If you use a relative one,
note that it is relative to the location of the style sheet containing those rules, so if the fonts are
placed in a subdirectory of your style sheet folder, say "fonts", the src line
should read "src: url(fonts/thesitewizard-font.ttf); instead. If you are confused by my
previous two sentences, and can't figure out how to correctly code the URL for your font, place it in
the same directory as your style sheet, and just use the font's filename as I did above.
You should also change "TheSiteWizardFont" on the line that currently says "font-family: TheSiteWizardFont;"
to the name of the font. If the name contains spaces, enclose it in
double quotation marks, for example, font-family: "My Super Font";.
Save the file and close the text editor.
Now open your web page in BlueGriffon. The font that you added is now available for use in the usual way. For those who don't know what "the usual way" means, read How to Change Fonts and Customize the Text on Your Web Page with BlueGriffon.
(If you still cannot find the font, go to the Style Properties panel and click the "+" button in the "Font Family" box of the "General" section. It will appear somewhere near the top of the list.)
When you upload your website, make sure that you also upload the font (inside the appropriate folder, if you used a subdirectory) and the updated style sheet.
Copyright © 2020 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/.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Use Google Fonts and Other Web Fonts in BlueGriffon
