Inter Var variable font is SLOW

@travisburch How do you plan on handling this? Use a child theme or copy and mod 2020 itself?

Those clauses in the css files like
@font-face {...}
seem hard to override. Would a useless background download affect rendering?

Does the site still slow down if you override this stuff
@supports ( font-variation-settings: normal ) {}
with the normal font?

Here is a solution, it will not download the fonts (tested). Based on the previous comment, the only downside in the above solution is that using * will also target assets like FontAwesome and will break them.

add_action( 'wp_head', function() {
	?>
	<style>
	body,
	input,
	textarea,
	button,
	.button,
	.faux-button,
	.wp-block-button__link,
	.wp-block-file__button,
	.has-drop-cap:not(:focus)::first-letter,
	.entry-content .wp-block-archives,
	.entry-content .wp-block-categories,
	.entry-content .wp-block-cover-image,
	.entry-content .wp-block-latest-comments,
	.entry-content .wp-block-latest-posts,
	.entry-content .wp-block-pullquote,
	.entry-content .wp-block-quote.is-large,
	.entry-content .wp-block-quote.is-style-large,
	.entry-content cite,
	.entry-content figcaption,
	.entry-content .wp-caption-text {
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif !important;
	}

	.widget_text p,
	.widget_text ol,
	.widget_text ul,
	.widget_text dl,
	.widget_text dt,
	.widget-content .rssSummary,
	.entry-content p,
	.entry-content ol,
	.entry-content ul,
	.entry-content dl,
	.entry-content dt {
		font-family: "Hoefler Text", Garamond, "Times New Roman", serif !important;
	}
	</style>
	<?php
}, 5 );

• This reply was modified 4 years, 3 months ago by acosmin.

No problem 🙂 they are mostly grouped, so it wasn’t that hard… there’s a missing </style> at the end I forgot to add.

@travisburch You can try it and see if it works for you, it should be added in your child theme’s functions.php file.

Don’t forget the </style> before <?php, I updated my previous comment: https://wordpress.org/support/topic/inter-var-variable-font-is-slow/#post-12273421

I wonder the !important is only needed because of the @supports in the parent theme.

Not tested:

@supports ( font-variation-settings: normal ) {
	body,
	.entry-content cite,
	.entry-content figcaption,
	.entry-content .wp-caption-text {
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	}
}