The following fonts are linked in the
<head>
section using Google Fonts.
We apply them using arbitrary values, simulating how you'd use custom font keys defined in
tailwind.config.js
.
This text uses 'Open Sans' (applied with
font-['Open_Sans',_sans-serif]
). It should display correctly.
This text uses 'Merriweather' (applied with
font-['Merriweather',_serif]
). It should display correctly.
Gotcha:
Tailwind can define custom font family names (e.g., via
theme.extend.fontFamily
in your config, or arbitrary values for CDN demo), BUT the browser still needs access to the actual font files. If the font files are not imported (e.g., via
<link>
in HTML
<head>
or
@import
in CSS), the custom font will not be displayed, and the browser will fall back to a default font.
This text attempts to use
font-['NoSuchFontExists',_sans-serif]
.
Since "NoSuchFontExists" is not linked or a standard web font, it will fall back to the browser's default sans-serif font (or the next available font in the stack).
Imagine you defined
font-custom-impact
in your
tailwind.config.js
to use a font called "ImpactfulDisplayFont".
If you applied
font-['ImpactfulDisplayFont',_fantasy]
(or
font-custom-impact
from your config)
but forgot to
<link>
or
@import
"ImpactfulDisplayFont.woff2" (or similar font file)
,
this text would NOT use "ImpactfulDisplayFont". It would fall back.
Solution:
Always ensure your custom font files are correctly linked in your HTML
<head>
(e.g., for Google Fonts) or imported/defined with
@font-face
in your CSS.