Custom Fonts and Typography

Customizing the appearance of your text using web fonts.

Font families

Typography is at the heart of good page design. By default, Motif exposes three font families: sans (Inter), serif (Merriweather), and mono (system mono font). You can switch to serif or mono by adding font-serif or font-mono to your element's className property:

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

<p>The quick brown fox ...</p>
<p className="font-serif">The quick brown fox ...</p>
<p className="font-mono">The quick brown fox ...</p>

Adding a custom font

If you wish to add a custom font to your page, you can do so in the way you would in a regular HTML document, namely by adding the font in your page's <head> section. To do so, head over to the motif.json configuration file (tap the down arrow next to the sidebar toggle , and select "Source" – motif.json can be found at the root of your file tree). In it, locate the "head" section, and the required code to import your fonts.

For instance, to add Goldman from Google Fonts, your head section should look like this:

{
  "head": [
    "<link rel='preconnect' href='https://fonts.googleapis.com' />",
    "<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />",
    "<link href='https://fonts.googleapis.com/css2?family=Goldman&display=swap' rel='stylesheet' />",
    "..."
  ]
}

Setting an element's font family

Using CSS styles

Once the font is part of the page's head, it can be used with the usual CSS syntax:

This text is typeset using the Goldman font

<p style={{ fontFamily: "Goldman" }}>
  This text is typeset using the Goldman font
</p>

Using Tailwind classes

A better way is to define a custom Tailwind class, similar to font-serif and font-mono. Head over to your project's tailwind.config.js (next to motif.json), locate the fontFamily definition, and add a new key to be used for your new font class.

module.exports = {
  important: true,
  theme: {
    extend: {
      // ...
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
        serif: ["Merriweather", ...defaultTheme.fontFamily.serif],
        mono: ["Menlo", ...defaultTheme.fontFamily.mono],
        system: ["Inter", ...defaultTheme.fontFamily.sans],
        goldman: ["Goldman", ...defaultTheme.fontFamily.sans],
      }, // ...
    }, // ...
  }, // ...
}

Now, you can set an element's font using Tailwind's font- key:

This text is typeset using the Goldman font

<p className="font-goldman">This text is typeset using the Goldman font</p>

Global configuration

If you wish to set a custom font to a certain element, for instance your headings, you can do so globally in your main.css file (located in the styles folder at the root of your project source). You can use the standard font-family key, or the Tailwind @apply directive.

@tailwind base;
@tailwind components;
@tailwind utilities;

h1, h2, h3, h4, h5, h6 {
  // If using tailwind.config.js:
  @apply font-goldman;
  // If using plain CSS:
  font-family: "Goldman"
}

Page-specific configuration

If you want your font setting to apply to individual pages only, you can add a key to your page's metadata, under the class entry:

---
class:
  h1: font-goldman
---

Note that this only works if you have set up the appropriate entry in your Tailwind configuration, as explained above.

Customizing text appearance

Besides styling components using vanilla CSS, Tailwind CSS classes can be used:

Size

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brow ...

The quick br ...

The quick ...

The qui ...

The qu ...

<p className="text-xs">The quick brown fox ...</p>
<p className="text-sm">The quick brown fox ...</p>
<p className="text-base">The quick brown fox ...</p>
<p className="text-lg">The quick brown fox ...</p>
<p className="text-xl">The quick brown fox ...</p>
<p className="text-2xl">The quick brown fox ...</p>
<p className="text-3xl">The quick brown fox ...</p>
<p className="text-4xl">The quick brown fox ...</p>
<p className="text-5xl">The quick brown fox ...</p>
<p className="text-6xl">The quick brown fox ...</p>
<p className="text-7xl">The quick brown fox ...</p>
<p className="text-8xl">The quick brown fox ...</p>
<p className="text-9xl">The quick brown fox ...</p>

Weight

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

<p className="font-thin ...">The quick brown fox ...</p>
<p className="font-extralight ...">The quick brown fox ...</p>
<p className="font-light ...">The quick brown fox ...</p>
<p className="font-normal ...">The quick brown fox ...</p>
<p className="font-medium ...">The quick brown fox ...</p>
<p className="font-semibold ...">The quick brown fox ...</p>
<p className="font-bold ...">The quick brown fox ...</p>
<p className="font-extrabold ...">The quick brown fox ...</p>
<p className="font-black ...">The quick brown fox ...</p>

Line height

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

<p className="leading-none">Lorem ipsum dolor sit amet ...</p>
<p className="leading-tight">Lorem ipsum dolor sit amet ...</p>
<p className="leading-snug">Lorem ipsum dolor sit amet ...</p>
<p className="leading-normal">Lorem ipsum dolor sit amet ...</p>
<p className="leading-relaxed">Lorem ipsum dolor sit amet ... </p>
<p className="leading-loose">Lorem ipsum dolor sit amet ...</p>

Alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

<p className="text-left">Lorem ipsum dolor sit amet ...</p>
<p className="text-center">Lorem ipsum dolor sit amet ...</p>
<p className="text-right">Lorem ipsum dolor sit amet ...</p>
<p className="text-justify">Lorem ipsum dolor sit amet ...</p>

Color and opacity

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

<p className="text-purple-700 text-opacity-100">The quick brown fox ...</p>
<p className="text-purple-700 text-opacity-75">The quick brown fox ...</p>
<p className="text-purple-700 text-opacity-50">The quick brown fox ...</p>
<p className="text-purple-700 text-opacity-25">The quick brown fox ...</p>
<p className="text-purple-700 text-opacity-0">The quick brown fox ...</p>

More information

For more information, check out the excellent Tailwind CSS documentation.

© 2022 Motif Land Inc. All rights reserved. This site is built with Motif.