[Resolved] Customizer Inter font not taking effect.

[vast]

Thanks Leo.

To clarify the issue, include the code below in the functions.php file.

// Dequeue, deregister, register and enqueue styles */
function tu_dequeue_styles() {
     wp_dequeue_style( 'generate-fonts' ); // /Dequeue external Google fonts resource
}
add_action( 'wp_enqueue_scripts', 'tu_dequeue_styles', 100 );

Next, reference the the Oxygen fonts locally rather than a request to Google. This assumes that the fonts are available from the location/path e.g. /wp-content/fonts/

For example;

@font-face{font-family:'Oxygen';font-style:normal;font-weight:400;font-display:optional;src:local('Oxygen Regular'),local('Oxygen-Regular'),url(/wp-content/fonts/2sDfZG1Wl4LcnbuKjk0mRUe0Aw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}";@font-face{font-family:'Oxygen';font-style:normal;font-weight:300;font-display:optional;src:local('Oxygen Light'),local('Oxygen-Light'),url(/wp-content/fonts/2sDcZG1Wl4LcnbuCJW8zaGW5Kb8VZA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Oxygen';font-style:normal;font-weight:700;font-display:optional;src:local('Oxygen Bold'),local('Oxygen-Bold'),url(/wp-content/fonts/2sDcZG1Wl4LcnbuCNWgzaGW5Kb8VZA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

Clear all caches including CDN.
Access the site using Private or Incognito mode (disable caching).
Monitor the resource requests using developer tools.

Our observation has been that although local fonts are downloaded, unless the request to Google fonts is allowed (it isn’t dequeued), the fonts don’t take effect. It’s unexpected as the fonts are available locally.

Typically this suggests that there are additional font requests being made when a page is rendering. Hence the questions;

1) Are additional fonts being requested?
2) If yes, where are these originating from?
3) Which resource is authoritative so the relevant fonts can be stored locally?

Hopefully this is clearer.

[vast]

Tom, it seems you replied to the post but there doesn’t appear to any details.

[vast]

Hi Leo, Thornbrand,

We were able to zero in on the issue and resolve it. We have included the solution below if anyone experiences it in the future.

Interestingly, we haven’t come across it before and with the older site libraries. It would be useful to know what has changed if anything.

1) If fonts are hosted locally, use preload. We were already doing this and although it helped, it only solved it partially.
2) Use font-display. The recommendation is either swap or optional. We decided the latter.
3) CSS Font Loading API provided the most insight into the status of the fonts.
4) Unicode ranges provided greater support in addition to WOFF2.
5) Here’s the kicker. We discovered including @font-face as custom CSS via the Customizer results in a delay. With (3), although the font downloads, it’s a little too late. This seems to be specific to locally hosted fonts. To overcome this, the font has to available as soon as the HTML element is processed.

[Leo]

Glad to hear and thanks for reporting back!

[Jeremy]

Good to hear and thanks as well, vast. Good luck with your project!

[Author]

Posts