fonts.check returns 'false' if font is included from two locations
Categories
(Core :: Layout: Text and Fonts, defect)
Tracking
()
People
(Reporter: artur, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36
Steps to reproduce:
When loading a font (typically accidentally) using two different URLs, Firefox considers the font not loaded even though it is.
Live example URL https://artur.app.fi/font.html
<!doctype html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap&" rel="stylesheet">
<style>
button {
font-family: 'Inter';
font-size: 20px;
}
</style>
<body>
<p>This example includes the same font using two different URLs</p>
<button id=b>Check if font is loaded</button>
<div id=result></div>
<script>
document.querySelector("button").addEventListener("click", () => {
result.innerText = document.fonts.check("20px Inter");
});
</script>
Actual results:
The button is rendered using the Inter font but the result of fonts.check is false
Expected results:
The font check should return true as the button is rendered using the 20px Inter font, i.e. the font is loaded and ready to use
Chrome returns true
Safari returns true
|
||
Comment 1•5 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Comment 2•5 years ago
|
||
Yeah, this seems a bit broken.
Interestingly, if you explicitly do document.fonts.load("20px Inter"), after that fonts.check will start returning true.
Description
•