Fluent Snippets "Missing" Font Question
I have discovered that some fonts don't work as expected when changing the heading font through a Fluent Snippet. For example, I can get Bree Serif and Bebas Neue to work, but Aldrich and Ledger don't work. The odd thing is that they all work through Appearance > Customize > General Settings > Typography, and in Text > Design > Heading Text settings.
Elegant Themes has created a web app that list all of the Google fonts along with sample text:
https://dainty-sundae-d5a7ec.netlify.app/
The ET article can be found at: https://help.elegantthemes.com/en/articles/8548029-how-to-visually-see-all-the-google-fonts-available-in-divi
ET says " Note: Some fonts in the above link might not be available in Divi. Please check out the How to Update the Google Fonts List in Divi article for more information on how to update the list of available Google Fonts in Divi.
https://help.elegantthemes.com/en/articles/8548056-how-to-update-the-google-fonts-list-in-divi
This involves having a Google Maps API key for the website and then adding a Google Fonts API. It seems to me that if the fonts are working when using the Divi settings, they should also work in the Fluent Snippet.
Has anyone experienced a font issue like this and if so, did you have an easier way to deal with it?
Do you have a link to the site you are working on?
macobuk no, it is on my localhost development platform, and I am primarily trying to get familiar with both Divi 5 and SiteKrafter. If I get the opportunity to start creating a new version of my website, I can get that up on a website I use for showing clients how work is progressing on their websites.
Update: The voyage of Divi5 discovery continues. I located a post from ET titled Understanding CSS Variables (And How To Use Them). That got me to try the Variable Manager where I easily changed the heading font to Aldrich, and it worked. I understand that this might not be in keeping with the SiteKrafter design for managing the heading font, but it is a workaround for now. It also forced me to learn a bit more about the new Divi interface.
At this point it's hard to say if this is a SiteKrafter issue or a Divi5 issue. The fact that the global variable in Divi worked leads me to think the issue is more likely to reside in SiteKrafter. I hope Mak can take a look at it and share his thoughts.
Robert Nitrio Can you show us how you had/have setup the fonts in Fluent Snippets, maybe copy and paste into here
If the font name is more than one word, it must be in quotation marks, like: "Times New Roman"
Robert Nitrio You have to make sure you label the font correctly ie sans or sans-serif and then clear the cache.
Augustine Mak I was very deliberate in doing both of those things, but that did not resolve the problem. I literally conducted over fifty tests with multiple versions of Divi 5 and three versions if SiteKrafter Pro, and the problem was never resolved.
macobuk I am aware of the double quote requirement for multiple word font names. Here is a portion of the snippet with a font that doesn't work.
:root {
/ Font Families /
--font-primary: "Architects Daughter", sans-serif;
--font-secondary: 'Inter', sans-serif;
--font-tertiary: 'Montserrat', sans-serif;
Robert Nitrio one minor issue
"Architects Daughter", cursive;
works for me
macobuk that certainly deepens the mystery. I had reached out to ET support and they said, "The reason why the fonts work when you set them in the Theme Customizer is that Divi will actually enqueue those Google Fonts. However, using them just in your style.CSS as CSS variables will not do the same, which is the reason why some of them are not going to work."
Because I don't have a deep knowledge on this subject, I will just leave that here in case it helps Mak or someone else if they want to pursue whether this odd behavior is isolated to my system or is more prevalent but perhaps unnoticed, based on specific font choices. I can live with the Variable Manager workaround if need be.
Robert Nitrio Best way you can go about this is check the font on google itself search and select the font and check the embed code
https://fonts.google.com/selection/embed
macobuk Thank you for pointing out the other types of fonts. When you only work in a serif/sans-serif world, or the tools you use don't require anything more than select-and-use for fonts (as in Word), that information is really easy to miss. That's especially true when you check out the fonts at Google Fonts. There is no indication of the font category. Had that information been listed, I would have spotted it and researched it. In any event, thanks again.
I am having the exact same problem as the OP. my font is: https://fonts.google.com/selection/embed
I have tried everything, even the API route. There is no combination that works other than either selecting in the customizer or setting as a variable. I tried the embed method & CSS (as seen on the font page above), nothing. Kinda frustrating.
I've been clearing the css cache between every change too... Any ideas?
It worked when I put it in the child theme styles... was I supposed to do this in the first place?