New Post | Nalu

This utility calculates [font overrides to eliminate Content Layout Shift (CLS)](https://simonhearne.com/2021/layout-shifts-webfonts/#reduce-layout-shift-with-f-mods) when using the CSS font-swap property:

Change the import below this to calculate overrides for your font family:

// try changing it to "https://esm.sh/@capsizecss/metrics/arial"

---

import metrics from "https://esm.sh/@capsizecss/metrics/nunitoSans";

----

export const sizeAdjust = 1;

export const toPercentage = (value, fractionDigits = 8) => {
  const percentage = value * 100
  return (
    (percentage % 1
      ? percentage.toFixed(fractionDigits).replace(/0+$/, '')
      : percentage) + '%'
  )
};

> #### fonts.css
>
> @font-face \{
> 
> 	'font-family': {metrics.familyName + " Override"};
>
> src:  local(-apple-system), local("BlinkMacSystemFont"), local("Segoe UI"), local("Roboto"), local("Helvetica Neue") local(sans-serif), local(ui-sans-serif);
> 
>     'size-adjust': {toPercentage(sizeAdjust)},
> 
>     'ascent-override': {toPercentage(
>       metrics.ascent / (metrics.unitsPerEm * sizeAdjust)
>     )},
> 
>     'descent-override': {toPercentage(
>       Math.abs(metrics.descent / (metrics.unitsPerEm * sizeAdjust))
>     )},
> 
>     'line-gap-override': {toPercentage(
>       metrics.lineGap / (metrics.unitsPerEm * sizeAdjust)
>     )},
> 
> \}

> #### tailwind.config.js
> 
> fontFamily: \{
> 
> body: ["{metrics.familyName}",  "{metrics.familyName} Override"],
>
> \}

Loading. Please wait...