Custom web fonts not loading properly and warning when linking in _document.tsx

### What is the problem?

I get the warning below when I link a web font inside the `` in the `_document.tsx`. The font I'm trying to use does not seem to be loading in correctly into any of the pages. Instead the browser seems to be defaulting to some system/browser font.

Repository to reproduce the issue.

https://github.com/abdiweyrah/head-font-test

### Paste all your error logs here:

```
Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font.eslint(@next/next/no-page-custom-font)
```

### Paste all relevant code snippets here:

`_document.tsx`
```javascript
return (










)
```

`tailwindcss.config.js`
```javascript
module.exports = {
mode: "jit",
purge: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
sans: ["Inter", "ui-sans-serif", "system-ui"],
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
```

### What are detailed steps to reproduce this?

1. Initialize new blitz app
2. Install tailwind `blitz install tailwind`
3. Extend the theme to include the font-family of your choice inside `tailwindcss.config.js`
4. Include the link to the web font in the `_document.tsx` file

### Run `blitz -v` and paste the output here:

```
macOS Big Sur | darwin-x64 | Node: v16.3.0

blitz: 0.38.1 (global)
blitz: 0.38.1 (local)

Package manager: yarn
System:
OS: macOS 11.1
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 1.46 GB / 16.00 GB
Shell: 5.6.2 - /usr/local/bin/zsh
Binaries:
Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
npmPackages:
@prisma/client: 2.25.0 => 2.25.0
blitz: 0.38.1 => 0.38.1
prisma: 2.25.0 => 2.25.0
react: alpha => 18.0.0-alpha-568dc3532
react-dom: alpha => 18.0.0-alpha-568dc3532
typescript: ~4.3 => 4.3.4
```

### Please include below any other applicable logs and screenshots that show your problem:

_No response_

Reproduce the problem using the linked head-font-test repository and the documented steps. Start by checking _document.tsx, tailwindcss.config.js, and the browser’s font requests alongside the @next/next/no-page-custom-font warning. Done means the Inter font loads on pages using the Tailwind sans family and the warning’s intended behavior is addressed.

Written by the indexing model from the issue text.