[Resolved] Customizer Inter font not taking effect.

[vast]

Selecting the Inter font from Customizer for headings does not appear to take effect. For example, this is the current setting for h1 headings.

View post on imgur.com

When a h1 heading is added to a page, the font does not render. It only applies font type, when explicitly selected. For instance, the details below have to be set.

View post on imgur.com

The following code has been added to the functions.php file.

add_filter( 'generate_typography_customize_list', function( $fonts ) {
	$fonts[ 'inter' ] = array( 
		'name' => 'Inter',
		'variants' => array( '100','200','300','400','500', '600', '700', '800', '900', ),
		'category' => 'serif'
	);
	
	return $fonts;
} );

[Leo]

Hi there,

Not sure if I fully understand.

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[vast]

Hi Leo,

Logging into the WordPress admin site, selecting Customizer, Typography and Headings, there is the option to select the desired font. In the first screenshot, the Inter font is chosen.

The expected behavior is when a h1 element is created it inherits the font. It does not.

To apply the font, the h1 element has to be selected on a particular page/post. The options to then apply advanced typography settings e.g. spacing, padding, etc are displayed. It seems that for font to work, it has to be explicitly specified e.g. second screenshot. If it isn’t, the font settings don’t take effect.

[Leo]

Does it make a difference if you activate the Google font toggle?
https://www.screencast.com/t/rtdlWdtPP

If not any chance you can link me to the page in question?

[vast]

Thanks Leo.

To rephrase the issue. Include the following block of code in the functions.php file.

add_filter( 'generate_typography_customize_list', function( $fonts ) {
	$fonts[ 'inter' ] = array( 
		'name' => 'Inter',
		'variants' => array( '100','200','300','400','500', '600', '700', '800', '900', ),
		'category' => 'serif'
	);
	
	return $fonts;
} );

– Log into the WordPress dashboard, select Customizer, Typography, Headings, H1.
– Update the current font e.g. Oxygen to Inter.
– Apply the changes.

The expected behavior is that when a h1 element is created on a page/post, it inherits the font.

The issue is that it doesn’t unless, the h1 element is selected on any page/post and the Inter font for example is specified explicity.

Unfortunately the site is on an internal server so it isn’t externally accessible at the moment.

[Jeremy]

Hi Vast and Leo.

I had some time here so I tried to reproduce the issue you’re describing on a local dev server.

– Copied/Pasted the supplied filter into functions.php
– Selected Customizer, Typography, Headings, H1
– Updated current h1 font to Inter
– Applied changes

When an h1 element is created on a page/post (or displayed from existing pages/posts), the font is rendering correctly as Inter for me.

I can override the Inter font using the advanced typography controls in GenerateBlocks, but the expected font is displaying for all h1 elements otherwise.

So, the code you’re using seems good here. I can think of two things that might be causing this then.

1. There’s custom CSS that’s been added which is applying a font-family: to the h1 element.
2. There’s some sort of caching issue causing the previous font to display unless the GenerateBlocks CSS is applied.

Hope this helps in some way. If not, maybe Leo or someone else has another idea.

[vast]

Thornbrand, thanks for giving it a go and testing it at your end.

Are you hosting the fonts locally? If yes, what is the CSS being applied and where?

In the example from the post earlier, the Inter fonts are hosted locally and the CSS is as follows;

This is included as custom CSS.

/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/fonts/inter-v2-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/fonts/inter-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/fonts/inter-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/fonts/inter-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/fonts/inter-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/fonts/inter-v2-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-800 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('/wp-content/fonts/inter-v2-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/fonts/inter-v2-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/fonts/inter-v2-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/fonts/inter-v2-latin-800.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/fonts/inter-v2-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/fonts/inter-v2-latin-800.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-900 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('/wp-content/fonts/inter-v2-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/fonts/inter-v2-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/fonts/inter-v2-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/fonts/inter-v2-latin-900.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/fonts/inter-v2-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/fonts/inter-v2-latin-900.svg#Inter') format('svg'); /* Legacy iOS */
}

[vast]

There was a similar thread posted recently – https://generatepress.com/forums/topic/adobe-typekit-in-generateblocks/.

Aside from the difference of the issue in this post i.e. the fonts are hosted locally & the stylesheet is included as custom CSS, Tom seems to suggest on using “Other”. This is the same solution in the second screenshot and isn’t the expected behavior.

[Jeremy]

No problem vast, happy to help if I can.

I was not hosting the font locally, but I think we may have stumbled onto the issue.

The code you’re using in your functions.php file is for Customizing the Google Font List. This will allow you to load a Google font that isn’t normally present in the list, from the Google Fonts server.

I think the code you want to use is from the Adding Local Fonts help doc, which will add a locally hosted font to the customizer list.

Your CSS looks good to me. Provided your font files are present in /wp-content/fonts/... , I believe all you need to do is replace your code with this:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Inter';

    return $fonts;
} );

The Inter font should then show up under “System Fonts” when you select a font in the customizer.

[vast]

Thanks Thornbrand.

We had tested it before and similarly it does not take effect. It appears in the list of system fonts with no change to the font.

There appears to be a difference in the CSS when ‘Inter’ entered in explicitly (second screenshot at the beginning of the post).

font-family: Inter,sans-serif;

In comparison, if only selected in Customizer, the CSS differs.

font-family: "Inter";

The font displays as intended in the former but not the latter.

[Jeremy]

Strange…it seems like the font just isn’t being loaded in the latter case then.

What I don’t understand is why calling it from GenerateBlocks works, but not from the customizer. Do you have any other CSS or functions that you’ve added?

I’m afraid I’m out of ideas for the moment. I need to sign off for the evening as well. I’m really sorry I couldn’t help you resolve this one quickly. Was sure we would. I’ll continue to think on it though.

GP support is top notch, and hopefully we’ve at least given them some more info to try and help you get this figured out. For now though, I’ll have to defer to them.

Hope you have a good evening.

[vast]

Thanks for the ideas and input Thornbrand. Appreciate the help so far.

To rule out any overriding styles or code that may conflict, the functions.php file was restored to it’s original state.

The only remaining code is;

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

It made no difference to the font style.

[Leo]

Sorry it took me awhile to jump back in this.

I just tried to replicate the issue but didn’t experience on my end.

Can you check if I’m missing s step here other than using Code Snippets instead of a child theme?
https://www.screencast.com/t/VU1tXAVSlS

[vast]

Thanks Leo.

We have narrowed it down to the following;

If the following line of code is removed/commented out, it resolves the issue for both remote and locally hosted fonts.

// 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 );

It seems that fonts are being referenced in different locations.

To demonstrate it as a reproducible issue, we’ll use the Dev GeneratePress demo as an example.

Using the developer tools available in Google Chrome, a request is made to https://fonts.googleapis.com/css?family=Oxygen:300,regular,700&display=optional

Additionally, the site is loading additional fonts that are not in the CSS file

https://fonts.gstatic.com/s/oxygen/v10/2sDfZG1Wl4LcnbuKjk0mRUe0Aw.woff2
https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCJW8zaGW5Kb8VZA.woff2
https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCNWgzaGW5Kb8VZA.woff2

View post on imgur.com

The same issue occurs when using Inter for instance.

1) Why are additional fonts being requested?
2) Where are these originating from?
3) Which resource is authoritative so the relevant fonts can be stored locally?

[Leo]

The request looks like it’s cached which is why the URL looks more like error code.

Oxygen is used throughout Dev so that’s why it’s being called?
https://www.screencast.com/t/0tWIthllgAY

Sorry I’m a little confused here.

[Author]

Posts