How to add custom fonts to a Grawlix-based webcomic

 

Ask anyone who works in print: web typography is a joke. There are many technical limits, but nothing hurts type design more than the lack of typefaces.

Here’s the problem. Traditionally designers can only work with what fonts their readers’ computers … and what they have is impossible to know for sure. We can guess Arial and Georgia, but that gets old quick.

Fortunately, services like Adobe Typekit and Google Fonts make it easier to diversify type usage on the web. Here’s how to use Google Fonts in a Grawlix-based webcomic for free.

Adding Google Fonts

First choose a type family you want to use on your site.

Selecting a type family at Google

A shopping-cart-like bar will appear at the bottom of your screen. Clicking that will give you the HTML and CSS you need to add the chosen font to your site.

Where to get the embed HTML and CSS

Add the HTML <link> element to the snippet.header.php file in your theme:

<link href="https://fonts.googleapis.com/css?family=FONTNAME" rel="stylesheet">

… where “FONTNAME” is the name that Google provides.

Then add the provided CSS to your theme’s tone file. If your tone file already has a body{…} selector, go ahead and use it.

Font code in a tone CSS file


Anyone can read the blog, but patrons get inside info. Support our project!