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.