Customizing the appearance of your text using web fonts.
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>
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' />",
"..."
]
}
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>
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>
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"
}
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.
Besides styling components using vanilla CSS, Tailwind CSS classes can be used:
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>
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>
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>
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>
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>
For more information, check out the excellent Tailwind CSS documentation.