Gosub fonts & text styling test
Downloaded @font-face webfonts plus generic families & fallback, weights, styles, variants, text-transform, spacing, decoration, and text shadows.
@font-face (downloaded webfonts)
Inter 400The quick brown fox jumps 0123
Inter 700The quick brown fox jumps 0123
Pacifico (display)The quick brown fox jumps
missing src → fallbackFalls back to Georgia serif
Fonts are OFL-licensed WOFF2 files in assets/fonts/ (Latin subset). A deliberately missing src tests fallback.
Variable font (font-variation-settings)
wght 100Variable weight axis
wght 300Variable weight axis
wght 500Variable weight axis
wght 700Variable weight axis
wght 900Variable weight axis
One file, continuous wght axis (100–900) via font-variation-settings.
Font families & fallback
serifThe quick brown fox 0123
sans-serifThe quick brown fox 0123
monospaceThe quick brown fox 0123
cursiveThe quick brown fox 0123
missing → fallbackFalls back to serif 0123
Font weight
100Thin weight sample
300Light weight sample
400Normal weight sample
600Semibold weight sample
700Bold weight sample
900Black weight sample
Font style
normalNormal upright text
italicItalic text sample
obliqueOblique text sample
Font variants
small-capsSmall Caps Variant
all-small-capsAll Small Caps
tabular slashed-zeroTotal 1090 / 1000
ligaturesoffice final affluent
text-transform
uppercasemake me uppercase
lowercaseMAKE ME LOWERCASE
capitalizecapitalize each word
Letter & word spacing
letter-spacing 4pxSpread out letters
letter-spacing -1pxTightened letters
word-spacing 12pxWide gaps between words
text-decoration
underlineunderlined text
wavy redspellcheck style
line-throughstruck out
overlineoverlined text
thick + offsetthick blue underline
text-shadow
dropShadowed heading
glowGlowing heading
outlineOutlined heading
Relative font sizes & indent
0.75em
1em
1.5em
2em
150%
This paragraph uses text-indent: 2em on its first line. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.