Most appropriate sub-area of p5.js?
p5.js version
2.3.3
Web browser and version
Chrome: 153.0.8010.53
Operating system
Windows
Steps to reproduce this
Steps
- Save the snippet below as
repro.html and open it in a browser. No server is needed.
- Open DevTools (F12) and go to the Console tab.
- Note the warning and the
NO glyph data line.
- Replace the URL with each font below, reload, and confirm both log
glyph data present with no warning:
- Bricolage Grotesque (variable, long
gvar offsets):
https://raw.githubusercontent.com/google/fonts/main/ofl/bricolagegrotesque/BricolageGrotesque%5Bopsz%2Cwdth%2Cwght%5D.ttf
- Jersey 10 (static):
https://fonts.gstatic.com/s/jersey10/v4/GftH7vZKsggXMf9n_J5X-A.ttf
Snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>p5 variable font repro</title>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.3/lib/p5.min.js"></script>
</head>
<body>
<script>
async function setup() {
createCanvas(400, 200);
const font = await loadFont(
'https://raw.githubusercontent.com/google/fonts/main/ofl/outfit/Outfit%5Bwght%5D.ttf'
);
console.log(font.data?.glyf ? 'glyph data present' : 'NO glyph data');
}
</script>
</body>
</html>Actual result
Console output:
WARN: No glyph data for 'Outfit%5Bwght%5D', retrying as FontFace
NO glyph data
font.data is undefined, so loadFont falls back to a plain FontFace. Text still renders, but glyph-outline features such as textToPoints() have no glyph data to work with.
Expected result
Glyph data is parsed (glyph data present), as it is for static fonts and for variable fonts that use long gvar offsets.
Why
Typr's gvar parser always reads glyphVariationDataOffsets as 4-byte Offset32 values:
https://github.com/processing/p5.js/blob/main/src/type/lib/Typr.js#L2211-L2214
Per the OpenType spec, the offsets are 4-byte only when flags bit 0 is set. Otherwise they are 2-byte uint16 values, and the real offset is the value × 2. Outfit's gvar has flags = 0, so every offset after the first is misaligned and parsing fails.
Most appropriate sub-area of p5.js?
p5.js version
2.3.3
Web browser and version
Chrome: 153.0.8010.53
Operating system
Windows
Steps to reproduce this
Steps
repro.htmland open it in a browser. No server is needed.NO glyph dataline.glyph data presentwith no warning:gvaroffsets):https://raw.githubusercontent.com/google/fonts/main/ofl/bricolagegrotesque/BricolageGrotesque%5Bopsz%2Cwdth%2Cwght%5D.ttfhttps://fonts.gstatic.com/s/jersey10/v4/GftH7vZKsggXMf9n_J5X-A.ttfSnippet
Actual result
Console output:
font.dataisundefined, soloadFontfalls back to a plainFontFace. Text still renders, but glyph-outline features such astextToPoints()have no glyph data to work with.Expected result
Glyph data is parsed (
glyph data present), as it is for static fonts and for variable fonts that use longgvaroffsets.Why
Typr's
gvarparser always readsglyphVariationDataOffsetsas 4-byteOffset32values:https://github.com/processing/p5.js/blob/main/src/type/lib/Typr.js#L2211-L2214
Per the OpenType spec, the offsets are 4-byte only when
flagsbit 0 is set. Otherwise they are 2-byteuint16values, and the real offset is the value × 2. Outfit'sgvarhasflags = 0, so every offset after the first is misaligned and parsing fails.