Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1050882

    Hi,

    I need to change the font family just for one specific paragraph.

    I gave the text blog element a css class and tried to apply the font with the following code:

    #av_section_1 .start-partner {
    font-family: ‘Lobster’ !important;
    }

    I also tried with HTML directly in the textbox element like:

    <p style=”font-family: ‘Lobster’;”> text</p>

    But I cannot get it to work. What do I need to do?

    #1051217

    Hey P3T3R_0ne,

    Thanks for the link, though your site is not loading on my end. Please check.

    Best regards,
    Rikard

    #1051361
    This reply has been marked as private.
    #1051669

    Hi,

    Thanks for that, so you are trying to target the h4 element, correct? If so then you could need CSS like this instead:

    #av_section_1 .start-partner h4 {
      font-family: 'Lobster' !important;
    }

    Best regards,
    Rikard

    #1051816

    Hi Rikard,

    yes I want to target the h4 element.
    I have put the code you suggested into quick css but the text still displays in the default font-family.

    Please check.

    Thank you very much for the support.

    #1051849

    Hi,

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

    #1052236

    Hi,

    It’s using Lobster on my end :-)

    Best regards,
    Rikard

    #1052263

    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.

    #1052455

    Hi P3T3R_0ne,

    Best regards,
    Victoria

    #1052925

    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?

    #1052960

    Hi,
    I took a look at your page and see that you are using this css:

    #av_section_1 .start-partner h4 {
        font-family: 'Lobster' !important;
    }

    and this seems to be working correctly:
    2019-01-11-211632
    Please try clearing your browser cache.

    Best regards,
    Mike

    #1053148

    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.

    #1053199

    Hi,
    Thank you for explaining further, I uploaded the Lobster font from Google Fonts into your Enfold Theme Options > Import/Export > Custom Font Manager and disabled the Enfold Theme Options > Performance > JS & CSS file merging and compression thinking that would help, but I then noticed that the English site was showing the font correctly and only the German site was wrong.
    After more investigation I changed the setting in the German Enfold Theme Options > General Styling > Fonts > Heading font to “default” but left the Body Font set to “Lato”, and I left the English “Heading Font” as “Lato”, this seems to have correct the issue. I checked the rest of your site for headings and even after clearing my browser cache a few times the other headings still show as “Lato”.
    I’m not sure what the issue with the German site was, but it seems to have something to do with how the theme options are set for each language.
    Please clear your browser cache and check.

    Best regards,
    Mike

    #1053211

    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,

    #1053227

    Hi,
    It should have not been necessary to upload the font, I did so to try to remove reasons for the error, you should not have to do this in the future. You can also enable the file merging once your site is done.

    The settings were not different for the two languages, but they were showing different for the languages, I’m not sure why this was, but as I don’t have the WPML plugin installed on my localhost I couldn’t recreate the error, I’m not saying that the plugin caused caused the error, I just couldn’t recreate the environment to test further.

    I don’t expect that you will see this error again, but I will be on the look out for this in other sites. If you want to make another element a different font again I recommend following the sound steps you took by adding a custom class and adding the css rule. If you have this issue again then we will investigate if there is a conflict between the options for each language, or if it was something else. Thank you for your patience.

    Best regards,
    Mike

    #1053399

    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.

    #1053975

    Hi,
    Sorry for the late reply, I investigated this further and I found that Enfold doesn’t load all of the Google fonts automatically, it specify loads the fonts that are assigned in the theme options for performance. So if you have assigned “Yellowtail” to any element in the theme options it will be loaded and available for your custom css, otherwise it is not loaded for your css.
    But any font that you upload in the Custom Font Manager is loaded and available.

    I tested this by trying to assign Yellowtail to a heading with a css rule, but it didn’t show correctly. When I assigned Yellowtail to the menu in the advanced styling it showed correctly for the heading. Then when I deleted the advanced styling option for the menu and uploaded the font in the Custom Font Manager, the css rule for the heading showed correctly.

    So if you want to change a specific element’s font, and it’s not one that you are already using in your theme options, please upload it to the Custom Font Manager and add a css rule.

    I hope this helps.

    Best regards,
    Mike

    #1054084

    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.

    #1054104

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘Change font family only for one specific text blog’ is closed to new replies.