HTML Drupal Tutorial 4: Fonts!
This is the fourth in a series of tutorials on using the Drupal HTML text editor to format web content.
The first tutorial covered:
- Visual vs. text editors
- Making paragraphs
- Bolding text
- Italicizing text
- Underlining text
The second tutorial covered:
- Creating headers
- Paragraph alignment
- Creating hyperlinks
- Making numbered and bulleted lists
The third tutorial covered:
- Embedding images in content
In this tutorial, I’ll cover how to use different typefaces and font sizes in your posts.
Playing with Fonts
Chances are, you’ll have chosen a theme for your website that comes with pre-selected font faces, colors and sizes. But every once in a while, you might want to mix it up a little to emphasize a point; lend a little stylistic panache to your content; or otherwise make your writing just a little more dynamic.
This bit of coding comes in handy for me most often when I’m including code snippets as text in my web content. It’s standard practice to use a fixed-width font face (like Courier New) when formatting code snippets in web content.
Using a Different Font Face
To use a different typeface in your web content, you’ll need to use the “p style” caret.
Once you’ve opened the “<p style>” caret, you can go in and indicate which font you want to use with “font-family”:
Now that the caret element has been put together, with your chosen font typeface in place, all you have to do is place in the text you want to use and close the “frame.” As I explained before, to close the “frame” for this element, you’ll only need to use “</p>”.
The final product will look like this:
Something to remember: you may have a bunch of gorgeous fonts installed on your machine that will render perfectly in your web content. If your readers don’t have those fonts installed on their machines, the fonts won’t render for them and the content will instead default to Times New Roman.
For a list of fonts you can use for online content, read this article by AmpSoft.
To change the size of your font, open a “<p style>” caret element and use “font-size.”
From there, you can indicate the size of your font in one of two ways: pixels or percentages.
The “<p style>” caret element will look like this if you’re using pixels:
And it will look like this if you’re using percentages:
You may need to experiment a little to get the font size you’re looking for.
You’ve probably noticed this nifty feature that brings up a little text box if you hover over something. It’s called a “title tool.” If you hover over this paragraph, you can see an example for yourself.
To create a title tool, you’ll use the “<p title>” caret. Its use it virtually identical to the “<p style>” caret, so that the final product will look like this:
Check back soon for the fifth HTML Drupal tutorial in this series, where I’ll cover how to use different font colors and backgrounds in your posts.