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.

image 1

For example, maybe you’re a cat telling a fairy tale about that time the good Fairy Buzzfeed gave the world the gift of eternal cat videos.

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.

image 2

Using a Different Font Face

To use a different typeface in your web content, you’ll need to use the “p style” caret.

image 3

Once you’ve opened the “<p style>” caret, you can go in and indicate which font you want to use with “font-family”:

image 4

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:

image 5

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.

image 6

The Matt Damon of the font world: He gets the job done, but he’s clearly no Garamond (the George Clooney of the font world).

For a list of fonts you can use for online content, read this article by AmpSoft.

Font size

To change the size of your font, open a “<p style>” caret element and use “font-size.”

image 7

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:

image 8

And it will look like this if you’re using percentages:

image 9

You may need to experiment a little to get the font size you’re looking for. 

Title Tool

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:

image 10

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.

You may also like

Leave a comment