This should be in Sniglet
The above text should appear in Sniglet immediately when the page and font
loads. However, if the font is in a dynamically inserted <link>
element and offsetWidth is measured on any element after a short timeout,
then the font won't render.
This seems to suggest some sort of race condition between loading the
linked stylesheet and the font inside, and the call to offsetWidth.
Changes to this page that prevent the bug
- Don't call offsetWidth on an the element (example)
- Include the stylesheet <link> in the markup instead of adding it dynamically (example)
- Dynamically add a <style> element instead of a <link> to an external stylesheet (example)
- Include an empty <style> element in the markup after the <script> tag (example)
- Set a timeout of sufficient length before calling offsetWidth on the element (example)
- Do the call to offsetWidth immediately instead of waiting for a timeout (example)
- Load this page by navigating back or hitting "enter" in the url bar instead of using the reload button
Things that will reveal the font once the page is loaded
- Use JavaScript to hide the body and then show it after a delay
- Open the developer tools to the Elements pane