Font-face toggler bookmarklet / Stoyan’s phpied.com

Ever needed to take a look at your web page and switch Net Fonts on and off? Expertise the format shift repeatedly, like some form of UX torture? Look no additional, right here comes the helpful bookmarklet.
Set up
Drag this hyperlink to a bookmark toolbar close to you:
msg.push(document.styleSheets.item(idx).href));alert(msg.join(‘nn’));}})()”>toggle fonts
Use
Go to a page with web fonts and click to toggle. Like so:
Source
The idea is you go through all stylesheets and mess with the fontFamily
of @font-face
rules. Simple. Stash them as fontFamiliar
for ease of toggling back.
const errors = []; for (let s = 0; s < doc.styleSheets.size; s++) { let guidelines = []; attempt { guidelines = doc.styleSheets.merchandise(s).guidelines; } catch (_) { errors.push(s); } for (let i = 0; i < guidelines.size; i++) { const rule = guidelines.merchandise(i); if (rule.constructor.identify === 'CSSFontFaceRule') { if (rule.fashion.fontFamiliar) { rule.fashion.fontFamily = rule.fashion.fontFamiliar; delete rule.fashion.fontFamiliar; } else { rule.fashion.fontFamiliar = rule.fashion.fontFamily; rule.fashion.fontFamily = ''; } } } } if (errors.size && !window.__fontfacetogglererror) { window.__fontfacetogglererror = true; const msg = ['Could not access these stylesheets:']; errors.forEach(idx => msg.push(doc.styleSheets.merchandise(idx).href)); alert(msg.be a part of('nn')); }
Limitations
When the stylesheets are usually not accessible by doc.styleSheets
API (e.g. on a 3rd celebration area, what!?), we can not mess with them. However we are able to report their URLs nonetheless. Solely the primary time although, an excessive amount of in any other case.
Format shift helper
Desire a format shift monitor to go together with your toggle? Paste this into the console earlier than you go toggling:
new PerformanceObserver((record) => { let cls = 0; for (const entry of record.getEntries()) { cls += entry.worth; } console.log(cls); }).observe({sort: 'layout-shift'});
Sorry, feedback disabled and hidden as a consequence of extreme spam.