This paragraph uses Tailwind's default
font-sans
(e.g.,
'Hello World' in default sans
).
This paragraph uses Tailwind's default
font-serif
(e.g.,
'Hello World' in default serif
).
This paragraph uses Tailwind's default
font-mono
(e.g.,
'Hello World' in default mono
).
This text tries to use
font-['MyNonExistentFont',_sans-serif]
.
Since "MyNonExistentFont" is not linked or imported, and unlikely to be a system font,
it will fall back to the next font in the stack (Tailwind's default sans-serif, or a browser default).
It will likely look the same as the default sans-serif text.
This text tries to use
font-['Noto_Serif_JP',_serif]
.
"Noto Serif JP" is a real Google Font. However, we have NOT imported it in this HTML file.
Therefore, it will fall back to the generic 'serif' family. It will NOT look like Noto Serif JP.
Tailwind's
fontFamily
configuration in
tailwind.config.js
(or using arbitrary values like
font-['FontName']
) only tells Tailwind what CSS
font-family
declaration to generate.
If the browser doesn't have access to the actual font files (because they weren't linked via
<link>
or imported via
@import
), the custom font will not display.
It will fall back to the next available font in the font stack or a system default.
To fix this, you would need to add something like
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
to your
<head>
.