Is there a way to ensure local fonts load from CDN when CDN is enabled?

I will post my findings here as they will likely be useful to anyone else facing a similar situation.

I had considered whether the issue was with the CDN redirection implemented on the site (a plug-in). But the fact that every (3 of the most popular) CDN plug-ins I tried, and every cache plug-in with CDN settings (3 widely used cache plug-ins), had the same result suggested to me that was not the source of the issue.

After looking more extensively into this situation, what I have found is that this issue was caused by the Aggregate CSS-files feature of the popular Autoptimize plug-in.

I found that Autoptimize provides a way around this. It is explained in the FAQ here.

To me, this discovery makes an important point, which is worth noting. Anyone else finding that their CDN implementation is mostly working, but some font (or perhaps some other assets) are not loading via their chosen CDN redirection method (such as any of the popular CDN enabling plug-ins) should first consider that the issue is likely caused by a conflict with another plug-in.
If you are using the somewhat popular Autoptimise plug-in, or any other optimisation plug-in that aggregates CSS files, that should be one of the first things troubleshoot.

In direct answer to the two questions:

  1. All popular CDN redirection plug-ins should have no issue redirecting the URI for fonts loaded via @font-face { ... } in the CSS from the theme assets and from plug-in assets. If they appear to be having such an issue, it is most likely another plug-in that’s at fault (as noted above).
  2. In WordPress there is no dequeue then (re)enqueue equivalent for @font-face declarations. You would have to dequeue the entire CSS file in question, and enqueue a modified version of it (with the hard-coded CDN URIs). Not useful, and not advisable.

Over-riding @font-face declarations

Should the need arise (not the case in this instance, now that it’s clear another plug-in was the cause of the issue) to over-ride an @font-face { ... } declaration in the CSS files of any plug-in, etc., you can do so by declaring that same @font-face { ... } yourself. You can then hard-code in the font file sources to what you need them to be. I tested this by declaring a number of @font-face { ... } statements via the popular Code Snippets plug-in. Doing this effectively changed the source locations of the font faces in question. One scenario this could come in handy is if you want to locally source a font that a plug-in is pulling in from a remote source.