Unique Font License Dilemma
Recently, I came across a unique situation with a font license that required me to query a counter on the font provider's domain every time the typeface was displayed. However, the recommended method of using import in the CSS file caused rendering delays due to blocking. This raised questions about how individual page views would be tracked effectively if the CSS file was cached and the import call was not triggered again until the cache cleared.
After removing the import call, I delved into finding an alternative approach that would work seamlessly across different browsers and under various settings such as disabled scripting features. Considered options like using a link tag with rel=prefetch proved to be ineffective, especially in older versions like IE7. The use of a script tag with defer and async attributes posed challenges for users who had disabled scripting functionalities.
The quest for a non-blocking solution led me through different possibilities including a fallback mechanism using a combination of noscript and image tags, but it raised concerns about potential broken images in certain scenarios. Ultimately, I settled for a straightforward image tag as a temporary fix, yet the search for the ideal strategy to cover a wide range of edge cases continues.
My interest in exploring diverse options is purely academic, focusing on the technical aspects rather than seeking alternative providers or discussing unlikely scenarios described earlier. The irony of being entrusted to serve the font file from my server while also being responsible for honest tracking perplexes me.
Coding Challenges
In a hypothetical scenario where the font counter resides at and the font.foo server faces performance issues, several challenges and solutions were explored:
Starting point
// fonts.css
@import url('font.foo/bar')
@font-face { ... }
// index.html
<link rel="stylesheet" href="fonts.css">
Separate link tag
// Problem: Blocks rendering
// index.html
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="font.foo/bar">
rel=prefetch
// Problem: Won't load in IE7, semantically awkward
// index.html
<link rel="prefetch" href="font.foo/bar">
Deferred async script load
// Problem: Won't work when user has disabled scripting
// index.html
<script src="font.foo/bar" async defer>
</body>
Script tag with added image fallback
// Problem: Won't work when user has disabled scripting AND images
// index.html
<script src="font.foo/bar" async defer>
<noscript><img src="font.foo/bar" alt=""></noscript>
</body>