[mateoserendipiaParticipant]

Hi,

I have a site for a client, running on a child theme, with some custom typography. All was working fine, but after the update all fonts are messed up.

I use the google Martel + Martel Sans fonts, which before the update were not in your font list (now they are). So I ‘called’ them in my custom css like this:

@import url(https://fonts.googleapis.com/css?family=Martel:400,700&subset=latin,latin-ext);

@import url(https://fonts.googleapis.com/css?family=Martel+Sans:400,700&subset=latin,latin-ext);

Then I have several classes assigned to elements in the site, that are defined in the custom css like this:

.componisten {
    font-family: 'Martel Sans';
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
}

After the update, the Martel and Martel Sans fonts do not show up at computers where these fonts are not installed, so it appears they are not ‘called’ anylonger.

How to fix all this?

Thx!

[mateoserendipiaParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please remove the following CSS under Customize > Custom > CSS, after that add them under style.css file locates in child theme folder instead:

@import url(https://fonts.googleapis.com/css?family=Martel:400,700&subset=latin,latin-ext);

@import url(https://fonts.googleapis.com/css?family=Martel+Sans:400,700&subset=latin,latin-ext);

Hope it helps 🙂

[mateoserendipiaParticipant]

Hi,

Thanks for the answer. I moved the @font-code, but it did not help. I don’t think it should make any difference where the @font-code is placed (and it didn’t).

Again, and as detailed in my post, everything worked fine before the update (even with the @font in the custom-css). Has anything perhaps changed in the way we should refer to fonts within the classes? Or could it be related to the fact that the Google Martel Fonts (both the Serif and the Sans version) were not in your font list before the update (that’s why a I had to include the @font-code), but are now in fact included in the list?

Thx.

[KoryKeymaster]

Hey mateoserendipia,

Thanks for writing in! While I’m not entirely sure why the @import statement would seemingly cease to work, either way I would recommend you move away from using them altogether now that your desired font is available in the Customizer. With the latest update we have also improved how the Google Font requests structured and loaded, eliminating duplicate requests and caching multiple option calls into a single string to improve performance. Select the fonts you want and their respective weights from the Customizer for the various elements and then you can still keep your custom class to add to certain elements if desired (as long as that 600 weight is something you’ve selected in the Customizer). If you are using different fonts for all of your other items such as body copy, headings, et cetera, and only using that class for certain instances, I would strongly encourage you to reduce your font footprint by making that an official selection in the Customizer as fonts can be a heavy addition to your website and keeping them to a minimum is extremely helpful for performance.

Thanks!

[mateoserendipiaParticipant]

Hi,

Thanks for the answer. I understand your remark on reducing the font-footprint. However, the way I was using the fonts before the update is not possible through customiser. For example, if you go to this page in the site:

http://decamerone.info/repertoire/

you’ll see various concert programs (‘programma’s’). The body font there is Martel (serif) but the font of the program lists is Martel Sans. So I have defined classes to these block grids in order to have the Martel Sans appear. The classes are defined in my custom css. This stopped working after the update, and an undefined serif-font is now showing (I can’t even tell which one it is). Only on computers where the Martel Sans is installed and active, does the site show well. This means, deducing, that the @font code is no longer working.

I do not see how I can get back to the situation of before the update in the way you describe above, using only the customiser. In the customiser I can only define one body font. Please explain to me how to go about defining another font for other instances.

Also, I still think it should be looked into why the @font code is no longer working – this has clearly to to with the recent series of updates.

Thanks.

[FriechModerator]

Hi There,

The @import code is still working. As I can see that the body text is in font-family: "martel"; you should set this on Customizer now as it is already available.

And the list that has a class .componisten and .werken are on font-family: "Martel Sans";

Try to clear your browser’s cache as well.

Hope it helps, cheers!

[mateoserendipiaParticipant]

Sorry, forgot to get back to you, but clearing the cache on all browsers (safari, Chrome and Firefox) fixed it, so thanks for the answer. Of course I cannot influence when previous viewers of the website clear their caches on their computers, so I have no idea who are being shown the rights fonts and who aren’t after The Update, but that’s part of the game, I guess…

Thanks!

[RadModerator]

Glad it’s fixed now 🙂 and you’re welcome!

[Author]

Posts