Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Modify `font-display` settings via WPT script injection
// create our custom link tag for the stylesheet
var url = ""; // 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
// 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
// monitor the font load
customFont1.loaded.then((fontFace) => {
// log some info in the console'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
You can’t perform that action at this time.