- This topic has 19 replies, 3 voices, and was last updated 3 years, 5 months ago by Jeremy.
-
AuthorPosts
-
November 2, 2020 at 2:02 am #1514146vast
Selecting the Inter font from Customizer for headings does not appear to take effect. For example, this is the current setting for
h1
headings.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.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; } );
November 2, 2020 at 9:57 am #1514932LeoStaffCustomer SupportHi 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 🙂
November 2, 2020 at 11:26 am #1515072vastHi 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.November 2, 2020 at 11:33 am #1515091LeoStaffCustomer SupportDoes it make a difference if you activate the Google font toggle?
https://www.screencast.com/t/rtdlWdtPPIf not any chance you can link me to the page in question?
November 2, 2020 at 11:39 am #1515104vastThanks 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.
November 2, 2020 at 2:46 pm #1515302JeremyHi 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 currenth1
font to Inter
– Applied changesWhen 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 theh1
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.
November 2, 2020 at 3:10 pm #1515314vastThornbrand, 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 */ }
November 2, 2020 at 3:18 pm #1515317vastThere 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.
November 2, 2020 at 3:39 pm #1515330JeremyNo 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.
November 2, 2020 at 4:17 pm #1515367vastThanks 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.
November 2, 2020 at 4:59 pm #1515381JeremyStrange…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.
November 2, 2020 at 5:40 pm #1515400vastThanks 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.
November 2, 2020 at 10:30 pm #1515587LeoStaffCustomer SupportSorry 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/VU1tXAVSlSNovember 3, 2020 at 2:10 am #1515720vastThanks 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
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?November 3, 2020 at 9:01 am #1516467LeoStaffCustomer SupportThe 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/0tWIthllgAYSorry I’m a little confused here.
-
AuthorPosts
- You must be logged in to reply to this topic.