Skip to content

Instantly share code, notes, and snippets.

@MurakamiShinyu

MurakamiShinyu/variable-font-test.html

Last active June 15, 2023 08:03
Show Gist options
  • Save MurakamiShinyu/d32ba89b932bcf669d471c1a909d8831 to your computer and use it in GitHub Desktop.
Save MurakamiShinyu/d32ba89b932bcf669d471c1a909d8831 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
variable-font-test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variable Font Test</title>
<style>
@font-face {
font-family: "VF";
src: url("https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSans/full/variable-ttf/NotoSans[wdth,wght].ttf");
}
body {
font-family: "VF";
}
</style>
</head>
<body>
<h1>Variable Font Test</h1>
<p style="font-stretch: 66%; font-weight: 100">This is a test. (font-stretch: 66%; font-weight: 100)</p>
<p style="font-stretch: 66%; font-weight: 200">This is a test. (font-stretch: 66%; font-weight: 200)</p>
<p style="font-stretch: 66%; font-weight: 300">This is a test. (font-stretch: 66%; font-weight: 300)</p>
<p style="font-stretch: 66%; font-weight: 400">This is a test. (font-stretch: 66%; font-weight: 400)</p>
<p style="font-stretch: 66%; font-weight: 500">This is a test. (font-stretch: 66%; font-weight: 500)</p>
<p style="font-stretch: 66%; font-weight: 600">This is a test. (font-stretch: 66%; font-weight: 600)</p>
<p style="font-stretch: 66%; font-weight: 700">This is a test. (font-stretch: 66%; font-weight: 700)</p>
<p style="font-stretch: 66%; font-weight: 800">This is a test. (font-stretch: 66%; font-weight: 800)</p>
<p style="font-stretch: 66%; font-weight: 900">This is a test. (font-stretch: 66%; font-weight: 900)</p>
<p style="font-stretch: 100%; font-weight: 100">This is a test. (font-stretch: 100%; font-weight: 100)</p>
<p style="font-stretch: 100%; font-weight: 200">This is a test. (font-stretch: 100%; font-weight: 200)</p>
<p style="font-stretch: 100%; font-weight: 300">This is a test. (font-stretch: 100%; font-weight: 300)</p>
<p style="font-stretch: 100%; font-weight: 400">This is a test. (font-stretch: 100%; font-weight: 400)</p>
<p style="font-stretch: 100%; font-weight: 500">This is a test. (font-stretch: 100%; font-weight: 500)</p>
<p style="font-stretch: 100%; font-weight: 600">This is a test. (font-stretch: 100%; font-weight: 600)</p>
<p style="font-stretch: 100%; font-weight: 700">This is a test. (font-stretch: 100%; font-weight: 700)</p>
<p style="font-stretch: 100%; font-weight: 800">This is a test. (font-stretch: 100%; font-weight: 800)</p>
<p style="font-stretch: 100%; font-weight: 900">This is a test. (font-stretch: 100%; font-weight: 900)</p>
</body>
</html>
Raw
variable-font-test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variable Font Test</title>
<style>
@font-face {
font-family: "VF";
src: url("https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSans/full/variable-ttf/NotoSans[wdth,wght].ttf");
}
body {
font-family: "VF";
}
</style>
</head>
<body>
<h1>Variable Font Test</h1>
<p style="font-variation-settings: 'wdth' 66, 'wght' 100">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 100)</p>
<p style="font-variation-settings: 'wdth' 66, 'wght' 200">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 200)</p>
<p style="font-variation-settings: 'wdth' 66, 'wght' 300">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 300)</p>
<p style="font-variation-settings: 'wdth' 66, 'wght' 400">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 400)</p>
<p style="font-variation-settings: 'wdth' 66, 'wght' 500">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 500)</p>
<p style="font-variation-settings: 'wdth' 66, 'wght' 600">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 600)</p>
<p style="font-variation-settings: 'wdth' 66, 'wght' 700">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 700)</p>
<p style="font-variation-settings: 'wdth' 66, 'wght' 800">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 800)</p>
<p style="font-variation-settings: 'wdth' 66, 'wght' 900">This is a test. (font-variation-settings: 'wdth' 66, 'wght' 900)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 100">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 100)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 200">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 200)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 300">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 300)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 400">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 400)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 500">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 500)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 600">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 600)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 700">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 700)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 800">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 800)</p>
<p style="font-variation-settings: 'wdth' 100, 'wght' 900">This is a test. (font-variation-settings: 'wdth' 100, 'wght' 900)</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment