Using Your Font

A font designer gives you access to his fonts in either of three formats: OpenType, TrueType, or Web Open Font Format (WOFF). Roughly speaking, you use the OpenType or TrueType format for screen applications like word processors and the WOFF format for a web page.

Usually fonts are packaged as a font family. A font family consists of font variants. Common font variants are regular, bold, italic, all-capitals, etc. In addition, a font family can have variants for specific use cases. E.g., a spreadsheet program might need a font to have equally spaced number figures. A font for reading code may have the minuscule l distinguishable from the number 1 or the majuscule O from the number 0. Yet another application may need a multi-spaced font, i.e., a font with character widths being a multiple of a constant. Lastly, some application might need a font to match a given font in character height, so that a fixed number of lines has a fixed height even if fonts change.

Screen Applications

The first thing to do to start using a font is to install it as a screen font. This way it is accessible in most text processing applications, e.g., LibreOffice Writer, Gimp, or Inkscape. It is also accessible in your favorite IDE or editor to use as a font to display code in.

In many Linux desktop environments you manage your screenfonts via the gnome-font-viewer. In the XFCE Applications Menu you find it under Accessories and Fonts. First, check if the font you are trying to install is already listed. If it is not, check if a .fonts folder exists in your home folder and create it if necessary. Next, copy all the font variants into the .fonts folder. To recreate the fonts cache enter

fc-cache -f -v

Sublime Text

Change the font in Sublime Text by opening your Preferences.sublime-settings file. You can access it via the menu under Preferences and Settings.

// Preferences.sublime-settings

{
  "font_face": "Triplicate T4c",
}

Emacs

You can set fonts in Emacs by adding the following line to the .emacs file in the home folder:

(set-face-attribute 'default nil :height 90 :font "Triplicate T4c")

Latex

You can change the font of a Latex document by using the xelatex compiler which uses the Xetex typesetting engine which can process OpenType fonts. Including and configuring the fontspec package allows you to use a custom font. The font needs to be installed like described above.

% test.tex

\documentclass{article}

\usepackage{fontspec}

\setmainfont{Equity Text A}

\begin{document}
  This is a test.
\end{document}

You can compile this document to produce a pdf file by entering

xelatex test.tex

HTML

Site Structure

/
+- custom.css
+- index.html
+- equity_text_a_regular.woff

Embedding a web font in a web-page requires you to set up a Cascading Style Sheet (CSS) document.

/* custom.css */

@font-face {
       font-family: 'Equity';
       src: url('equity_text_a_regular.woff') format('woff');
}

body {
       font-family: 'Equity', serif;
}

In the first block we introduce our custom font: Equity. In the second block, we require that if nothing overrides our setting then Equity should be used throughout the body of our website.

We integrate this stylesheet in our website by linking to it.

<!-- index.html -->

<!DOCTYPE html>

<html>
  <head>
    <title>Hello User</title>
    <link rel="stylesheet" href="custom.css" />
  </head>
  <body>
    <h1>Hello User</h1>
    <p>This is a test.</p>
  </body>
</html>

Sphinx

Using your font in a Sphinx project requires you to do two things: (i) we need to add a custom stylesheet and the web font to the Sphinx project’s _static folder, and (ii) we need to advertise the custom stylesheet to the project configuration in the project’s conf.py. The custom stylesheet is just the stylesheet we presented in the previous section.

/
+- _static
   +- custom.css
   +- equity_text_a_regular.woff
+- conf.py
+- index.rst
+- Makefile

We extend the HTML output section of the conf.py adding custom.css to the html_css_files list while making sure that the html_static_path list sees the _static folder holding our stylesheet and the web font.

# conf.py

...

html_css_files = ['custom.css']

...

html_static_path = ['_static']

...