I have made some terrible choices over the past twenty+ years working on the web and with information. Questionable fonts. Weird logos and images. You live and you learn. I was playing around with an ebook project and decided it was time to make it look more … professional. It is incredibly easy to use Google Fonts for a more polished look.

Don’t take it from me. Read Typography for Lawyers.

This web site uses Google Fonts. If you are a WordPress user, you can use a plugin that takes care of the legwork for you. I use WP Google Fonts but there are others. It provides a pick list of fonts and where you want to apply them (body text, headings, whatever).

You can always do this yourself if you’re comfortable cutting and pasting a line of code into the back of your web pages. And whether you use a plugin or not, you can still restyle your content using CSS (cascading style sheets) to fine tune your look.

One reason I’m particularly enthused about Google Fonts is that you can embed them in your work for free. All of the fonts I’ve found on the site allow re-use within your own creations; you just can’t sell the fonts as fonts, by themselves. If you are using other fonts on your computer or in your office, it can be trickier to determine what license governs their use.

One simple use is your law library’s web site. Nice fonts can make the information you are sharing more legible. Then I’ll touch on using them in an ebook.

Web Fonts

The two biggest challenges I had with Google Fonts were easy to overcome. The first was choosing. There are hundreds of possible options. It can be a bit much. The second was to figure out how to use the chosen fonts.

One feature to look at is the category filter at the top. If you’re looking for a display font (think TITLE), you can select just those. Or if you prefer serif or sans serif fonts, you can restrict in that manner too.

At the bottom of each font page is a pairing suggestion. If you are not confident in your own choices, this can be a good guide to get things that work together. Then you are ready to embed your font code.

It’s a <link> tag. And it goes between the <head> and </head> of your web page. When you are looking at your chosen font on Google Fonts, scroll down the Styles list. It will show the font in regular, italics, bold, and other variations. For each one you’d like, click “Select this Style” to the right.

A screenshot of the Google Fonts page for the Roboto font. The right hand sidebar shows that I have selected the regular Roboto font and also the Open Sans font from the font pairings at the bottom of the screen.

After choosing the first one, a sidebar will open. You can click on the EMBED tab to show the code you will need for your web site. You will cut and paste that link into your web site template or page.

One reason to use Google-hosted fonts is the speed. When you rely on this link, it is telling browsers to use fonts hosted at fonts.googleapis.com. The font file is one less file that your web server has to load when a visitor arrives.

It’s not just fonts. You can also offload the hosting of standard javascript libraries like JQuery for speed benefits. Not everyone thinks that using a CDN for fonts is a good idea. And some people prioritize speed over fonts.

In the image above, there is also CSS code. This is how you can style content on your site. You identify the font family you want to use and a fall back font in case, for whatever reason, your primary font fails. Here’s what it looks like on my site – I use the WordPress customizer and the Additional CSS menu to add custom CSS to my theme – with a identified:

h1.entry-title, h3.entry-title a {
: Averia Serif Libre, serif;
: 36px !important;
font-weight: bold;
text-align: right;
bd2031;
}

If you use a plugin or a particularly crotchety theme, you may need to force some of your style settings. You can do this by adding the !important element to the style. It goes before the semi-colon for whatever style you want to impact. You can see above where I wanted to force a particular .

Legal publishers are doing it. Here are a couple of examples found by looking for mentions in commercial interfaces:

  • CanLII: Apple Color Emoji, Arial, Baskerville, BlinkMacSystemFont, Century Gothic, Consolas, Courier New, Font Awesome 5 Brands, Helvetica Neue, Liberation Mono, Menlo, Monaco, Myriad Web, Open Sans, Noto Color Emoji, Noto Sans, Roboto, Segoe UI, Segoe UI Emoji, Segoe UI Symbol, SFMono-Regular, Verdana,
  • HeinOnline: Arial, Consolas, Courier New, Glyphicons Halflings, Helvetica, Helvetica Neue, Menlo, Monaco, Roboto (Black, Bold, Light, Thin), Verdana
  • LexisNexis Advance: Arial, Calibri, Helvetica, Lato, LexisAdvance_4_2, lexisnexis-icons
  • Westlaw Canada: Arial, Georgia, Helvetica, Knowledge, Times,

All of the publisher sites rely on visitor system fonts (I’ve put them in italics). The sites will use fonts on your devices, then fall back to web fonts, then fall back to generic fonts (san-serif, serif, monospace).

I wonder at what point the focus on latency makes much of a difference. Since it’s measured in milliseconds – the load of a font from the system or the CDN – I wonder how large the market is that still uses sub-broadband speeds (not suggesting they don’t exist; my home does not have broadband).

It’s the fast approach but I’m a bit surprised at how conservative it is. In particular, because there was a lot of styling happening. Each style adds to the size of your page. But not all publishers bothered to minify their CSS, so you wonder if the gain in using system fonts is lost by over-sized stylesheets.

Ebook Fonts

The same process works for ebooks. But if you rely on the web-based version, then the only way the font will work is if the ebook reader is connected to the internet. Fortunately, it is easy to add fonts to your ebook file.

You do not need to. Ebook readers and web browsers will display content with default fonts. The point is that you can make your information more custom and, hopefully, easier to read with well-designed fonts.

I am big advocate of law libraries publishing content. There is content out on the internet – government docs among them – that are hard to use as published. Law libraries can take on the role of creating better instances of that content. Not on a whim, but with specific audiences and use cases in mind. For example, I took a pretty awful wiki on the Canadian Charter of Rights and Freedoms and converted it. The first iteration was a better designed web site with hyperlinks but the second was an ebook.

Before I get off my soap box, there is a reason to consider this direction. There is an opportunity for the law library to go beyond just mediating access. For example, for the official Charterpedia to be useful, we would have to guide a researcher to it. Then, because Charterpedia does not link to all citations, we’d have to show the researcher how to convert the information so they can retrieve the case from a database or internet case law source. And that is without touching on the wrong citations in the government document.

We cannot boil the ocean. But there are small tide pools that we could step into and improve. Take free information and aggregate it in a way that the output is more useable. Create a service that is unique to your law library and community.

All of my ebook projects so far have involved a web site version too. It makes me happy to know that I can now create a look and feel including styles and replicate it no matter how the content is used.

Anyway, back to fonts.

There are a couple of ways to add fonts to an ebook. One is through the open source Calibre ebook reader and library tool. The embed function sounds very much like what you might do with Microsoft PowerPoint. It puts the fonts inside the file so that, no matter what fonts are available on the platform you are using, the fonts will render properly.

I was building the ebook I was working on from web content. I tend to use Sigil in that case, since I like the interface for working on HTML and I’m familiar with how it works. But I had never used it with fonts before.

The project had started as a Microsoft Word document. Then I dropped it into Pressbooks’ hosted platform. The tool feels outdated and less flexible than a modern WordPress site so I ended up exporting the Pressbooks file and loading it as a subsite here. I will be publishing it in the future both as a web site and ebook.

As I mentioned, I expect you could use the <link> tag. But you want the portability. When you have your ebook file open in Sigil, there are two folders you can use to render text with new fonts.

The first is the Fonts folder. The other is the Styles. To add fonts to your ebook, you will need to download the font files and then add them in Sigil. If, like me, you are using Google Fonts, return to the page for the font you’ve selected. Now look for the Download Family link at the top right of the page.

Screenshot from Google Fonts page for Roboto with a red arrow pointing at the Download Family option.

Unlike the Embed option for fonts, where you can create an embed code for multiple fonts, you can only download one font family at a time. But it downloads all of the files you need in a compressed zip archive. Unzip the file and you will find the TrueType Font (TTF) files you will need for your ebook.

A screenshot of the Sigil ebook editor interface. Right click on the Fonts folder to see the pop up menu that will allow you to Add Existing Files. This is how you add new fonts.

I got a little foxed at this point. I had:

  • downloaded the font family from Google Fonts.
  • unzipped the fonts into a folder.
  • right clicked on the Sigil Fonts folder in my ebook.
  • clicked Add Existing Files and selected my True Type Fonts.

But even when I used the CSS to refer to the new font families, nothing happened. I was missing a step. The stylesheet (stored in the Styles folder) does not know about the font files stored in the Fonts folder.

As you can see in the image above on the right side, I had to add a @font-face rule for each font. The source (src: url) points the stylesheet to where the font file is. The @font-face rule goes at the top of your style sheet. Now the style sheet should be working.

The very last step is to make sure that the HTML pages in your ebook – it is essentially a mini web site – point to your style sheet. That will cause your ebook chapters to load the style sheet, which will load the fonts, which will render the book the way you want it.

Like fonts, stylesheets are also loaded using the <link> title. My ebook has 7 chapters so each chapter.html file has this same code at the top. The code’s hyperlink reference (href) points at the stylesheet in its /Styles folder.

An added bonus to this approach: you get a bunch of TTF files. You can drag the unzipped TTF files over to your /Windows/Fonts folder and use them in your normal work. If you are creating a lot of online content, you can reuse the same fonts in every format of your work.

As I say, none of this is required. We can continue to take the information we’re given and pass it on to the researcher. But when there are opportunities to improve the information we receive, or create on our own (pathfinders, libguides, online quizzes, handouts for training sessions, mini-texts or articles on a subject area), the bar could not be much lower to make them look more legible and appealing.