Font Size Adjust Property
What Is This
When loading custom fonts if you use the font-display: swap; method of swapping fonts, you want to minimize the cumulative layout shift caused by swapping the default font with the custom font.
This page is being created to help determine the correct size-adjust property for @font-face declarations.
How Am I Loading Fonts?
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers. It was co-developed by Google and Typekit.
The documentation and source code for the Web Font Loader is available in the GitHub repository.
NOTE: I had trouble getting the WebFontConfig JavaScript function callbacks to work properly (I was planning on calculating the widths and heights of the letters only after the letters had loaded), so I assumed that the fonts load in under a second, and I calculate the width and height of each letter after that one second for each font. To see what I am talking about, see an example script below.
I don't know yet how the font-stretch property comes into play here.
(function() {
const url = "${font2Obj.weight_400_url}";
WebFont.load({
google: {
families: ["${font2Obj.font_name}"]
}
});
setTimeout(() => {
const obj = {};
const fonts = [];
Array.from(document.querySelectorAll('#comparing-font-families div[data-font]')).forEach((fontDiv) => {
const font = fontDiv.getAttribute('data-font');
if (font) {
if (!!!obj[font]) {
fonts.push(font);
obj[font] = {
heights: [],
widths: [],
averageWidth: 0,
averageHeight: 0,
wordWidth: 0,
wordHeight: 0
};
}
const letter = fontDiv.querySelector('div[data-letter]');
const widthSpan = fontDiv.querySelector('span[data-width]');
const heightSpan = fontDiv.querySelector('span[data-height]');
if (letter&&widthSpan&&heightSpan) {
const width = letter.offsetWidth;
const height = letter.offsetHeight;
obj[font].widths.push(width);
obj[font].heights.push(height);
widthSpan.innerText = String(width);
heightSpan.innerText = String(height);
}
}
})
Array.from(document.querySelectorAll('#comparing-font-families div[data-font-stretch]'))
.forEach((el) => {
const font = el.getAttribute('data-font-stretch');
if (font&&obj[font]) {
obj[font].wordWidth = el.offsetWidth;
obj[font].wordHeight = el.offsetHeight;
}
})
const output = document.getElementById('font-form-output');
if(output) {
Object.keys(obj).forEach((key) => {
var tempAvgWidth = 0;
var tempAvgHeight = 0;
for (let i = 0; i < obj[key].widths.length;i++){
tempAvgWidth+=obj[key].widths[i];
tempAvgHeight+=obj[key].heights[i];
}
tempAvgWidth /= obj[key].widths.length;
tempAvgHeight /= obj[key].widths.length;
obj[key].averageWidth = tempAvgWidth;
obj[key].averageHeight = tempAvgHeight;
});
const sizeAdjust = ((obj[fonts[1]].averageHeight/obj[fonts[0]].averageHeight) + (obj[fonts[1]].averageWidth/obj[fonts[0]].averageWidth))*50;
const htmlStr = `...`;
output.insertAdjacentHTML('beforeend',htmlStr);
}
},2000);
})();Determining the Size Adjust