This is a different version of a font on/off toggler bookmarklet. I did one such bookmarklet earlier this year, which works by messing up font-family
inside @font-face
.
This new version works my messing up url()
inside @font-face
blocks. By "messing up" I mean changing the string "woff" to "woof" which means making the font files unavailable.
The motivation is to be able to toggle on/off and judge the "new school" of doing font fallbacks, namely using fallbacks such as local()
. In short, the previous bookmarklet breaks @font-face
blocks that use local()
, this version does not. This version only looks for url()
.
Drawback: looking for "woof" files cases 404s during toggling but I think this is not a biggie.
For a demo and other info check the original post
Install
Drag this link to a bookmark toolbar near you:
Full and unminified source
const errors = []; for (let s = 0; s < document.styleSheets.length; s++) { let rules = []; try { rules = document.styleSheets.item(s).rules; } catch (_) { errors.push(s); } for (let i = 0; i < rules.length; i++) { const rule = rules.item(i); if (rule.constructor.name === 'CSSFontFaceRule') { if (rule.style.oldSrc) { rule.style.src = rule.style.oldSrc; delete rule.style.oldSrc; } else { const src = rule.style.src; if (src.includes('url(')) { rule.style.oldSrc = src; rule.style.src = src.replaceAll('.woff', '.woof'); } } } } } if (errors.length && !window.__fontfacetogglererror) { window.__fontfacetogglererror = true; const msg = ['Could not access these stylesheets:']; errors.forEach(idx => msg.push(document.styleSheets.item(idx).href)); alert(msg.join('\n\n')); }