How to Add Whatever Font You Want to Your HTML Template
When you determine the font you are going to use for an HTML document you have to realize that when an end user views that document in their browser they can only see fonts that are installed on their system. That means that if you set the font of your HTML document to "My Fancy Unique Font" and your end user doesn't have that font installed, they won't see it.
How ScreenSteps Handles Fonts for HTML Templates
In ScreenSteps we let you select a font-family for HTML templates. But all this does is add an html class to the body. The CSS files in the default HTML templates then know what to render for each class.
Example From HTML Template
Here is an example from one of the ScreenSteps HTML templates.
Example From the CSS File
Here you can see the font-family declarations for each class. So if you select "Courier" as the font for your template, ScreenSteps adds the class "courier" to the body tag and the CSS file sets the font accordingly.
Why Did We Choose the Fonts We Did
These are common fonts that are available on the vast majority of operating systems so you content should look pretty close to the same on various systems.
How Do I Set My Own Font?
It is very simple. Just add a CSS style with the font you want to use. You will need to modify one of the stock templates or create one form scratch.
Open Templates Folder
Open the HTML Templates preference pane (1) and select the Lesson, Manual or Clipboard tab (2). Right-click on the template you would like to customize and select Reveal Template Folder (3).
Edit the CSS File
Open the css file in a text editor.
Comment out the font-family settings starting with a /* and ending with a */. Then add your own font-family setting. That is all there is to it. You can add multiple fonts in a list. The user's computer will try to load each font in the list until it finds one that matches a font the user has installed.
Add your comment