Removing calls to @font-face for unused fonts

  • I decided to change the fonts on my website from the Inter/Jost combination to instead use the System-Sans-Serif font stack. I used Appearance -> Styles -> Typography to make sure all the fonts specified for Headings / Text / Links / Buttons / Captions were all set to “System Sans-Serif”, and went through everywhere else in my site I could think of to see if anything was set to a font other than that or Default.

    However, when I load the site, I still get the @font-face calls to load Inter & Jost fonts showing up in the generated pages. What could I be missing? Is there a way to eliminate these calls? When I Inspect the various elements on the page or use Firefox to show all fonts used, these fonts aren’t being used at all on the page.

    @font-face{font-family:Inter;font-style:normal;font-weight:300 900;font-display:fallback;src:url('[...]/wp-content/themes/twentytwentyfour/assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:Jost;font-style:normal;font-weight:100 900;font-display:fallback;src:url('[...]/wp-content/themes/twentytwentyfour/assets/fonts/jost/Jost-VariableFont_wght.woff2') format('woff2');}
@font-face{font-family:Jost;font-style:italic;font-weight:100 900;font-display:fallback;src:url('[...]/wp-content/themes/twentytwentyfour/assets/fonts/jost/Jost-Italic-VariableFont_wght.woff2') format('woff2');}

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hey @ajwe!

    Have you tried using the Create Block theme plugin for this? Once you install the plugin, it adds a section to manage theme fonts under Appearance. You can remove the fonts there, and then use the plugin to save your changes as a custom child theme, or a style variation of the same theme.

    Gin

    (@rawdolphe)

    Hi, just wanted to chime in and take the opportunity to suggest / request the following:

    <span style=”text-decoration: underline;”>SVG font icons are extremely popular</span>; say in my case (and most cases) we would only need 3 to 5 max and wouldn’t want to upload a whole library for it, and I wouldn’t want to use a plugin either…

    So, the Creare Block theme plugin could be updated with a new option to embed SVG font icons?!

    Thread Starter ajwe

    (@ajwe)

    Hi Kavya @properlypurple,

    I did try the Create Block Theme plugin after seeing that recommended in another thread. I installed it on my test website & went to the Appearance -> Manage Theme Fonts section and removed everything other than the System Sans-Serif & System Serif fonts, and then reloaded some pages on my test site. But, it still seems to have the Jost & Inter font faces loaded (there’s no caching on my test site, so that shouldn’t be an issue).

    So I figured just removing the fonts wasn’t enough. I tried saving the changes as a style variation (not quite sure what that actually means, as my mental model of themes seems to be off a bit). But, it didn’t work, and instead it seems to have reverted my website back to all the default stylings (e.g., images got rounded corners again) and was a mess. But I was able to use the timeline to revert back to the previous state.

    I tried the Clone Twenty Twenty-Four option to create a theme ajwe-2024a, then uploaded that back to the server & activated the theme, but the source code still shows @font-face calls for Inter & Jost.

    Finally, I tried the Create child of Twenty Twenty-Four option to create a theme ajwe-2024c, uploaded it to the server & activated the theme, but it still is showing the @font-face calls for Inter & Jost.

    I must be doing something wrong here and probably don’t understand some key concept of how the themes are storing style changes (database vs. json vs. ???), or how the theme decides to emit the <style id='wp-fonts-local'> section with these font-face references.

    When I visit the modified themes/twentytwentyfour directory and grep for Jost in the theme.json file, it’s not there. So something else must be causing this code to get inserted… ?? I notice in the database, the wp_posts table has a record (last updated this morning, so it must be related to these experiments) with post_title “Custom Styles” that has a bunch of json with references to Jost & Inter in the Typography section, even though those aren’t listed under the Manage Theme Fonts section of Generate Block Theme plugin.

    Thread Starter ajwe

    (@ajwe)

    Here’s something I just tried that seems to have worked:

    I fired up phpMyAdmin, found the record in wp_posts where post_title is Custom Styles and post_name is wp-global-styles-twentytwentyfour and post_status is publish (not inherit). Then I copied the post_content field, pasted it into vscode & re-formatted the json, then deleted the parts of the json where it mentioned Jost & Inter, then copied & pasted it back into the database record to replace the post_content. When I reloaded some pages, all the references to Jost & Iter are now gone.

    Probably not the safest thing to do in the world, and this was only on my test site which I can mess up if I need to, but it worked!

    Moderator jordesign

    (@jordesign)

    Hey @ajwe – glad to hear that worked for this case.

    More good news is that font management is coming as a core part of WordPress 6.5 in a little over a month – so that should simplify things even further.

    Hi @ajwe . In the WordPress core inside this file wp-includes/fonts/class-wp-font-face.php this is the line that prints this <style id=’wp-fonts-local’>:

    printf( $this->get_style_element(), $css );

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.