Skip to content

Instantly share code, notes, and snippets.

Created February 20, 2020 00:25
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Nooshu/c857ce6ed4d644cee73bc53f82685058 to your computer and use it in GitHub Desktop.
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