Created
February 20, 2020 00:25
-
-
Save Nooshu/c857ce6ed4d644cee73bc53f82685058 to your computer and use it in GitHub Desktop.
Modify `font-display` settings via WPT script injection
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(){ | |
// create our custom link tag for the stylesheet | |
var url = "https://www.example.com/static/app.css"; // IMPORTANT: this is the CSS that contains your @font-face rules | |
var head = document.getElementsByTagName('head')[0]; | |
var link = document.createElement('link'); | |
link.type = "text/css"; | |
link.rel = "stylesheet" | |
link.href = url; | |
// append the stylesheet to the head | |
head.appendChild(link); | |
// wait for the CSS file to load before modifying the font setup | |
link.onload = function () { | |
// define our font face and modify the properties (will trigger a load) | |
var customFont1 = new FontFace('nta', 'url([FONT_URL_HERE])', { | |
display: 'swap', // display setting to test here | |
weight: '700' // font-weight | |
// other font properties here | |
}); | |
// add the modified font to the FontFaceSet | |
document.fonts.add(customFont1); | |
// monitor the font load | |
customFont1.loaded.then((fontFace) => { | |
// log some info in the console | |
console.info('Font status:', customFont1.status); // optional | |
// log some info on the WPT waterfall chart | |
performance.mark('wpt.customFont1Loaded'); // optional | |
}, (fontFace) => { | |
// if there's an error, tell us about it | |
console.error('Font status:', customFont1.status); // optional | |
}); | |
// repeat above for multiple fonts | |
} | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment