Change font family only for one specific text blog

Hi,

actually the font changes a bid. But it´s definitely not the Lobster font style.

Hi,

can you show a screenshot? On my end it doesn´t. I have looked through various browsers.

In private content find a screenshot of what I see in the front end.

Thank you for the support.

Hi,

thank you for suggesting the advanced styling feature. It indeed changes the font-family.

However, the thing is I want the font-family changed only and exclusively for one specific text element which in this case happens to be an h4 element.

To my understanding the advanced styling will change the all the H4 elements on the website which is not desired.

How come that I cannot just overwrite the font-family attribute with simple css?

Hi Mike,

thank you for the reply.

It´s true the code `#av_section_1 .start-partner h4 {
font-family: ‘Lobster’ !important;
}`
is in quick CSS. It was my initial try to change the font-family. However, this is not what made the font-family change. What made the font-family change to lobster is the option in Enfold Child (DE)>advanced styling where we changed the styling of all H4 elements on the website (see screenshot: https://cl.ly/d2c2bfe73220).
When I delete the advanced styling for H4 elements in Enfold Child(DE)>Advanced Styling, then the font-family is not ‘Lobster’ anymore even though the CSS code above is still there.

Changing the font-family with the Advanced Styling feature of Enfold is not optimal because it changes the style of all H4 elements on the website. I only want to change font-family for exclusively this one text element.

Hi,

thank you very much for investigating. I checked the site and both languages show the font. All other texts are still in Lato as far as I saw.

Concerning the uploading font-type Lobster into Enfold Theme Options > Import/Export > Custom Font Manager: I did not take steps to upload that font somewhere because I thought it comes as a default Google font with the theme. Was this a necessary step to make it work?

Concerning disabling JS & CSS file merging and compression: Does this need to stay disabled to make it work? As soon as I finish this site (hopefully very soon) I will look to increase the performance as much as possible. I will want to activate the css merging feature again. That should not cause this to break again, should it?

About the different theme options per language: I don´t know why these are different per language. I cannot remember to have changed something for only one language. Generally, I find it pretty confusing that there are different theme options per language anyway. I never saw this in other themes. I cannot imagine a case where I would want to have different theme options per language. However, I admit that there might be cases where this flexibility is nice to have.

So to conclude, I don´t know what has caused the problem and what solved it, but it seems to work fine now. In case I decide to use a different font-family for that text element. Should I upload it in import>custom font?

Thank you,

Hi,

thank you for taking time and explaining all this.

I just tried something. Under Enfold Child (EN)>quick css I changed the font-family to ‘Yellowtail’ to see if it would display the new font. However, the font was not displayed correctly. Instead it was some normal font, something like Arial or similar (it´s definitely not Lato which is set in the settings under Enfold Child (EN)>general styling>font).
I changed the CSS back to ‘Lobster’ and the front end is back to showing Lobster again.

I did further tests by making various text boxes on a draft page which will not be published (find the link to the test page in private content).

The first text box has Yellowtail set as font-family. However, the font-family is not rendering on the front end. Some other font type is displayed (not Lato). The strange thing is that when you inspect the text box with chrome dev tools it says “font-family: Yellowtail” is being applied (Check for yourself). The font Yellowtail is a standard Google font and can be selected under Enfold Child>general styling>font and therefore it should not be necessary to upload it.

The second test box has, again, Lobster as it´s font and this one is getting the correct rendering.

Then I went ahead and uploaded the google font Yellowtail into Enfold Child (DE)>import/export>custom font manager. The exact naming of the file was ‘yellowtail-v8-latin’. I created a third test text with corresponding css to see if it would show ‘yellowtail-v8-latin’ on this one.
And indeed, the browser does render the Yellowtail font family!

For a fourth text box I tried including @import url(‘https://fonts.googleapis.com/css?family=Yellowtail’) before the relevant css code. But this also did not help.

So my guess is that the css style sheet cannot import the google default fonts, which come pre-installed with the theme, for some reason. In order to change a font-family with custom css it seems necessary to upload that font in Enfold Child>import/export>custom font manager first.

When you have time, you might want to investigate this issue further. It doesn´t feel to me that it has anything to do with the plugin wpml at all though, but I don´t know.

My specific problem is solved, as I have the desired font correctly displayed. So, thank you for helping out.

Hi Mike,

thanks for following up. Now, everything is a 100% clear and I know what to do if I need to custom change any font in the future.

Thank you. You can consider the topic as closed.