<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - CSS font-variation-settings does not handle uppercase axis names in variable fonts"
href="https://bugs.webkit.org/show_bug.cgi?id=163546">163546</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>CSS font-variation-settings does not handle uppercase axis names in variable fonts
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>macOS 10.12
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Text
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>lorp@lorp.org
</td>
</tr>
<tr>
<th>CC</th>
<td>mmaxfield@apple.com
</td>
</tr></table>
<p>
<div>
<pre>When using CSS to set axis positions in variable fonts, only lowercase axis names function correctly.
Although the spec advises that both uppercase and lowercase axis names are allowed, and that there is no equivalence between uppercase and lowercase axes, in practice axes with uppercase names are ignored. Inspecting the DOM reveals that upper-to-lowercase conversion is applied to font-variation-settings as the value enters the DOM.
Two problematic fonts are BuffaloGalRegular.ttf (axes: CK,FR,HV,CN,BR,TC) and ZyconRegular.ttf (axes: T1,T2,T3,T4,M1,M2). These do not work in Webkit Nightly. A DOM inspection reveals the styles are case converted. For example:
style="font-variation-settings: 'CK ' 0, 'FR ' -0.298, 'HV ' -0.06, 'CN ' 0, 'BR ' 0, 'TC ' 0;"
… becomes …
style="font-variation-settings: 'ck ' 0, 'fr ' -0.298, 'hv ' -0.06, 'cn ' 0, 'br ' 0, 'tc ' 0;"
After this conversion, the axis names no longer match those in the font, and the axes do not function.
(Note also the replacement of two spaces by one, but that seems not to be a problem.)
Both BuffaloGalRegular.ttf and ZyconRegular.ttf function correctly after converting tag names to lowercase using TTX.
Spec: <a href="https://www.microsoft.com/typography/otspec/fvar.htm">https://www.microsoft.com/typography/otspec/fvar.htm</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>