Let's style the heading font a little shall we?

Not done anything special with the heading font so far, so going for something from Google Fonts called 'Rubik Dirt'

August 24th, 2022

For this blog I'm just linking it back to Google, if you don't want them knowing so much about your site you could download it and serve it yourself, but that's not really bothering me here, so we put this into the head of our layout.antlers.html

&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Rubik+Dirt&amp;display=swap" rel="stylesheet"&gt;

I'm using CSS variables so in the tailwind.config.js we've added something like this

        fontFamily: {
            heading: "var(--font-heading)",
            ...

and then in our content.css we add this to make that available at the root level as a tailwind class.

:root {
    --font-heading: 'Rubik Dirt', cursive;
	...

Then the final piece is to state where exactly we are using that, in this case I've only applied it to the H1 tag

h1 {
	@apply font-heading;
	...

Sorted.