Skip to content

Commit 2be825a

Browse files
Copilotkylewaynebenson
Copilot
and
kylewaynebenson
committed
Add example HTML file demonstrating italic axis usage
Co-authored-by: kylewaynebenson <1043051+kylewaynebenson@users.noreply.github.com>
1 parent 414eec8 commit 2be825a

1 file changed

Lines changed: 132 additions & 0 deletions

File tree

‎example-italic.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Mona Sans - Italic Axis Example</title>
7+
<style>
8+
/* Proper way to load Mona Sans with italic support for all browsers */
9+
@font-face {
10+
font-family: 'Mona Sans';
11+
src:
12+
url('fonts/webfonts/variable/MonaSansVF[wdth,wght,opsz,ital].woff2') format('woff2 supports variations'),
13+
url('fonts/webfonts/variable/MonaSansVF[wdth,wght,opsz,ital].woff2') format('woff2-variations');
14+
font-weight: 200 900;
15+
font-stretch: 75% 125%;
16+
font-style: normal;
17+
font-optical-sizing: auto;
18+
}
19+
20+
@font-face {
21+
font-family: 'Mona Sans';
22+
src:
23+
url('fonts/webfonts/variable/MonaSansVF[wdth,wght,opsz,ital].woff2') format('woff2 supports variations'),
24+
url('fonts/webfonts/variable/MonaSansVF[wdth,wght,opsz,ital].woff2') format('woff2-variations');
25+
font-weight: 200 900;
26+
font-stretch: 75% 125%;
27+
font-style: italic;
28+
font-optical-sizing: auto;
29+
}
30+
31+
body {
32+
font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
33+
padding: 40px;
34+
max-width: 800px;
35+
margin: 0 auto;
36+
line-height: 1.6;
37+
font-size: 18px;
38+
}
39+
40+
h1 {
41+
font-weight: 900;
42+
font-size: 3em;
43+
margin-bottom: 0.5em;
44+
}
45+
46+
h2 {
47+
font-weight: 700;
48+
margin-top: 2em;
49+
margin-bottom: 1em;
50+
}
51+
52+
.demo-box {
53+
background: #f5f5f5;
54+
padding: 30px;
55+
border-radius: 8px;
56+
margin: 20px 0;
57+
}
58+
59+
.weight-demo {
60+
margin: 10px 0;
61+
}
62+
63+
em, .italic {
64+
font-style: italic;
65+
}
66+
67+
.info {
68+
background: #e3f2fd;
69+
padding: 20px;
70+
border-left: 4px solid #2196f3;
71+
margin: 20px 0;
72+
}
73+
74+
.success {
75+
background: #e8f5e9;
76+
border-left-color: #4caf50;
77+
}
78+
</style>
79+
</head>
80+
<body>
81+
<h1>Mona Sans Italic Example</h1>
82+
83+
<div class="info success">
84+
<strong>✓ Browser Compatibility:</strong> This page demonstrates the correct way to use Mona Sans with italic support across all browsers, including Chromium-based browsers (Chrome, Edge, Opera).
85+
</div>
86+
87+
<h2>Basic Italic Usage</h2>
88+
<div class="demo-box">
89+
<p>This is regular text. <em>This is italic text using the &lt;em&gt; tag.</em> Back to regular.</p>
90+
<p>More regular text. <span class="italic">This is italic using a class.</span> Regular again.</p>
91+
</div>
92+
93+
<h2>Italic with Different Weights</h2>
94+
<div class="demo-box">
95+
<div class="weight-demo" style="font-weight: 200;">
96+
Light (200): Regular text and <em>italic text</em>
97+
</div>
98+
<div class="weight-demo" style="font-weight: 400;">
99+
Regular (400): Regular text and <em>italic text</em>
100+
</div>
101+
<div class="weight-demo" style="font-weight: 600;">
102+
SemiBold (600): Regular text and <em>italic text</em>
103+
</div>
104+
<div class="weight-demo" style="font-weight: 900;">
105+
Black (900): Regular text and <em>italic text</em>
106+
</div>
107+
</div>
108+
109+
<h2>Italic with Different Widths</h2>
110+
<div class="demo-box">
111+
<div class="weight-demo" style="font-stretch: 75%;">
112+
Condensed (75%): Regular text and <em>italic text</em>
113+
</div>
114+
<div class="weight-demo" style="font-stretch: 100%;">
115+
Normal (100%): Regular text and <em>italic text</em>
116+
</div>
117+
<div class="weight-demo" style="font-stretch: 125%;">
118+
Expanded (125%): Regular text and <em>italic text</em>
119+
</div>
120+
</div>
121+
122+
<h2>CSS Implementation</h2>
123+
<div class="info">
124+
<p><strong>Important:</strong> To ensure the italic axis works correctly in Chromium-based browsers, you need to declare two separate <code>@font-face</code> rules:</p>
125+
<ol>
126+
<li>One with <code>font-style: normal</code> for regular text</li>
127+
<li>One with <code>font-style: italic</code> for italic text</li>
128+
</ol>
129+
<p>See the <code>&lt;style&gt;</code> section in this HTML file for the complete implementation, or check the README.md for detailed instructions.</p>
130+
</div>
131+
</body>
132+
</html>

0 commit comments

Comments
 (0)