Variable web fonts
Testing variable fonts with different CSS settings.
Fonts
These fonts are licensed under the SIL Open Font License.
The webfonts on this page were subsetted with fontTools subset.
pyftsubset font.ttf --unicodes="U+0020-009F,U+00A0-00FF,U+20AC,U+2010,U+2013,U+2014,U+2018,U+2019,U+201A,U+201B,U+201C,U+201D,U+201E,U+2039,U+203A,U+2026,U+2022" --flavor=woff2 --output-file="font.woff2"
CSS for tests. You can edit this!
Test with font-weight: normal
An example text using the „Bitter Pro” font. Here it’s bold.
An example text using the „Exo 2” font. Here it’s bold.
An example text using the „Source Code Pro” font. Here it’s bold.
An example text using the „Vollkorn” font. Here it’s bold.
Test with font-weight: bold
An example text using the „Bitter Pro” font. Here it’s bold.
An example text using the „Exo 2” font. Here it’s bold.
An example text using the „Source Code Pro” font. Here it’s bold.
An example text using the „Vollkorn” font. Here it’s bold.
Test with font-variation-settings: "wght" 400
An example text using the „Bitter Pro” font. Here it’s bold.
An example text using the „Exo 2” font. Here it’s bold.
An example text using the „Source Code Pro” font. Here it’s bold.
An example text using the „Vollkorn” font. Here it’s bold.
Test with font-variation-settings: "wght" 700
An example text using the „Bitter Pro” font. Here it’s bold.
An example text using the „Exo 2” font. Here it’s bold.
An example text using the „Source Code Pro” font. Here it’s bold.
An example text using the „Vollkorn” font. Here it’s bold.
Test with font-weight: normal
and font-variation-settings: "wght" 400
An example text using the „Bitter Pro” font. Here it’s bold.
An example text using the „Exo 2” font. Here it’s bold.
An example text using the „Source Code Pro” font. Here it’s bold.
An example text using the „Vollkorn” font. Here it’s bold.
Test with font-weight: bold
and font-variation-settings: "wght" 700
An example text using the „Bitter Pro” font. Here it’s bold.
An example text using the „Exo 2” font. Here it’s bold.
An example text using the „Source Code Pro” font. Here it’s bold.
An example text using the „Vollkorn” font. Here it’s bold.