Home>Support>Google Font does not change if changed in Body Font

Google Font does not change if changed in Body Font

Hi,

I have installed vantage theme and have used it for a couple of my websites. Recently I have installed google fonts and had set merriweather font for Body font and for header and others Racing Sans One.

Text on the page showed Racing Sans One and not merriweather font.

Kindly let me know how to change the font of the Body font so the same gets reflected on every page.

Regards

Giant

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 4 months, 29 days ago Andrew Misplon Hi, I Work Here

    Hi Giant

    Thanks for reaching out.

    Do you have a public URL where we can take a look at what’s going on?

  2. 4 months, 29 days ago Giant

    Hi Andrew,

    Thanks for your reply.

    Yes URL is bobrupani.com/about-me/. now I have written HTML code on-page for Merriweather google font.

    I hope to get a solution to this problem.

    Warm Regards

    Giant

  3. 4 months, 29 days ago Andrew Misplon Hi, I Work Here

    Thanks. The page looks to be password protected or requires a login.

  4. 4 months, 28 days ago Giant

    Hi,
    Login is Venus123 and password is [email protected]

    I hope to get a resolution soon.

    Warm Regards

    Giant

  5. 4 months, 28 days ago Andrew Misplon Hi, I Work Here

    Thanks.

    The body font below the About heading on the About page is using Merriweather.

  6. 4 months, 28 days ago Giant

    Hi Andrew,

    I have done changes through HTML coding so it’s showing this font by setting in Body font.

    If you compare home page font it’s from Body font ( Merriweather) and about is coded through HTML.

    Now I hope you can see the difference.

    So setting font in body font is not effective.

    Kindly guide on the same

    Warm Regards

    Giant

  7. 4 months, 28 days ago Andrew Misplon Hi, I Work Here

    Thanks.

    At CustomizeTheme DesignFonts it looks like the Body Font has been set to Merriweather Sans. Try checking that setting and changing it as required.

    Page: Fonts

  8. 4 months, 28 days ago Giant

    Hi Andrew,

    Thanks for your reply.

    I have set the Body font as Merriweather but the font on the home page is different and not Merriweather.

    While in about page which is set through HTML code is actually Merriweather font.

    I hope you can see the distinction between the two pages.

    Kindly verify and guide accordingly.

    Warm Regards

    Giant

  9. 4 months, 28 days ago Andrew Misplon Hi, I Work Here

    From what I can see in the page source, the body font is set to Merriweather Sans which is different from Merriweather. Please, can you confirm that your font setting says Merriweather and not Merriweather Sans?

  10. 4 months, 28 days ago Giant

    Hi Andrew,

    Since there is no provision of attachment on your platform I have attached a screenshot of settings for your reference.

    Warm Regards

    Giant

  11. 4 months, 28 days ago Giant

    Hi Andrew,

    I have set fonts to “Merriweather” and not Merriweather Sans which I have repeatedly mentioned in my mail.

    I hope now it’s clear to you about what font is set and what fonts are seen on the home page.

    Check my email for the attachment of settings.

    Warm Regards

    Giant

  12. 4 months, 28 days ago Andrew Misplon Hi, I Work Here

    Hi Giant

    Thanks for the feedback.

    The forum doesn’t support attachments. If you ever would like to send screenshots you can upload them to imgur.com or any cloud sharing site and share the link.

    It looks like your Google Fonts plugin is loading its CSS after the theme CSS. The Google Fonts plugin is targeting entry content paragraphs with Merriweather Sans which is overriding the theme’s setting. You can either remove the Google Fonts plugin or you can adjust the Google Fonts plugin so that it’s targeting paragraphs with Merriweather and not Merriweather Sans.

    Here is what the CSS from the Google Fonts plugin looks like, the CSS from this plugin is output after the theme’s Customizer CSS, it’s also more specific (targeting paragraphs) which means it takes precedence.

    https://imgur.com/a/VyOul5W

  13. 4 months, 28 days ago Giant

    Hi Andrew,

    Your conclusion of loading and overriding is not correct since the site title, heading, and menu font which are set to Racing Sans One they are loaded and are shown on the website but the only body font is not shown on pages.

    Hence, google font is loaded but there is a problem with body font only.

    So I think something else is wrong which you will have to identify and correct problem which I am facing.

    Warm Regards

    Giant

  14. 4 months, 28 days ago Andrew Misplon Hi, I Work Here

    The reason your home page body font is loading as Merriweather Sans and not Merriweather is because of the CSS output by your Google Fonts plugin. If you’d like to confirm this, temporarily deactivate your Google Fonts plugin. Alternatively, change your Google Fonts plugin to output Merriweather and not Merriweather Sans for the body font. The Google Fonts plugin is overriding the theme setting.

    https://imgur.com/a/qpKMPqG

  15. 4 months, 28 days ago Giant

    Hi Andrew,

    If the Google Fonts plugin is overriding the theme setting then even fonts of the site title, heading, and menu font should not be shown as set (Racing Sans One) which is the reason my conclusion is that only body font is having issue.

    I hope you will now focus on the actual problem since the problem is not about overriding is not the actual issue.

    Warm Regards

    Giant

  16. 4 months, 28 days ago Andrew Misplon Hi, I Work Here

    Hi Giant

    If you would like your body font to use Merriweather why are you setting Merriweather Sans as the body font from within your Google Fonts plugin?

    For your body font, you’ve selected Merriweather in theme settings and Merriweather Sans (a different font) in your Google Fonts plugin. The Google Fonts plugin’s rule is more specific which is why it’s overriding the theme setting.

    If you’d like to keep using the Google Fonts plugin, please, take a screenshot of that plugin’s settings, upload it to Drive or Imgur.com etc. and I’ll try to assist with making the correction I’ve requested above.

  17. 4 months, 28 days ago Andrew Misplon Hi, I Work Here

    I don’t mind diving a bit deeper into CSS specificity if you’d like but to solve this particular issue you’re facing, in your Google Fonts plugin locate the following:

    .entry-content, .entry-content p, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .excerpt, .excerpt p, .type-post p, .type-page p {
    font-family: "Merriweather Sans";
     }

    And change it to:

    .entry-content, .entry-content p, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .excerpt, .excerpt p, .type-post p, .type-page p {
    font-family: "Merriweather";
     }

    That change will resolve the issue you’re facing.

    —-

    Below is some background on what’s happening:

    When you choose a setting option in the Customizer a CSS rule is output, we write that rule manually when creating the theme. When you select the body font, the following CSS rule is printed to the page:

    body, #content, .entry-content, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .widget-area, .widget, .sidebar, #sidebar, footer, .footer, #footer, .site-footer {
        font-family: "Merriweather";
    }

    That rule would be working. However, your Google Fonts plugin is printing the following rule:

    .entry-content, .entry-content p, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .excerpt, .excerpt p, .type-post p, .type-page p {
        font-family: "Merriweather Sans";
    }
    

    The Google Font plugin’s rule is more specific than the Vantage rule, it targets the paragraph tag within the entry content div. The more specific rule takes precedence. If you’d like to find out a bit more on CSS specificity here is a page to check https://www.w3schools.com/css/css_specificity.asp.

  18. 4 months, 28 days ago Giant

    Hi Andrew,

    I will try to make changes as suggested but these codes are available in which file.

    Kindly guide

    Giant

  19. 4 months, 28 days ago Andrew Misplon Hi, I Work Here

    Thanks. Please, make the change in the Google Fonts plugin, let me know once that’s done and I’ll inspect the home page again, we’ll go from there. Thanks again.

  20. 4 months, 27 days ago Giant

    Hi,
    I have never made any changes in plugins so unless you give instructions I will not try to make changes.

    Warm Regards

    Giant

  21. 4 months, 27 days ago Andrew Misplon Hi, I Work Here

    How did you set fonts in your Google Fonts plugin initially? Go to the settings for your Google Fonts plugin and change Merriweather Sans to Merriweather for the body font. I’m not familiar with the plugin you’re using.

  22. 4 months, 27 days ago Andrew Misplon Hi, I Work Here

    https://docs.fontsplugin.com/basic-settings/base-typography

    AppearanceCustomizeGoogle FontsBasic SettingsBase Typography. Which font is set there?

  23. 4 months, 27 days ago Giant

    Hi,

    I have checked the settings and in base, the typography font is “Merriweather” and the headings typography is “Racing Sans One”.

    I have set Racing Sans One font in site Title, heading, and menu font which is showing as per settings.

    Regards

    Giant

  24. 4 months, 27 days ago Andrew Misplon Hi, I Work Here

    Your fonts plugin is still outputting Merriweather Sans.

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    Private Snippet

    Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and Private Snippet for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  25. 4 months, 27 days ago Giant

    Hi,

    I have created user site-origin as Administrator and mail has been sent password is Private Snippet

    Kindly login, check, and give your feedback.

    Regards

    Giant

  26. 4 months, 27 days ago Andrew Misplon Hi, I Work Here

    Thanks. Here is where you’re setting Merriweather Sans: https://imgur.com/a/qoMkRId

  27. 4 months, 27 days ago Giant

    Hi,

    Thanks for pointing out the problem. I have changed that to Merriweather.

    Now if your compare font between home and bout they are still different and in about I have set in HTML so that seems to be correct.

    Kindly check and give your feedback.

    Regards

    Giant

  28. 4 months, 27 days ago Andrew Misplon Hi, I Work Here

    The home page text is in bold. If you remove the bold tag from the text it will look the same.

  29. 4 months, 27 days ago Giant

    Hi Andrew,

    Thanks for your solution.

    I have checked the same para by comparing both pages and I think they are absolutely the same.

    Thanks once again ANDREW.

    Warm Regards

    Giant

  30. 4 months, 27 days ago Andrew Misplon Hi, I Work Here

    Super, glad to hear you’re making progress :) All the best with the rest of your project.

    Cheers for now.

  31. 4 months, 25 days ago Giant

    Hi Andrew,

    I have not written on the support forum since I was not sure whether you will get my message or not.

    I want to know how to add two pics side by side on a page by adding a block of images.

    I hope to get reply as soon as possible.

    Warm Regards

    Giant

  32. 4 months, 25 days ago Andrew Misplon Hi, I Work Here

    Hi Giant

    You can try the SiteOrigin Image Grid widget if you’re using Page Builder, that’s one option. Alternatively, you can use an Editor widget and align one image left and the other right aligned.

  33. 4 months, 25 days ago Giant

    Hi Andrew,

    Thanks for your reply.

    I have downloaded the wp-widget editor and created one rich text widget.

    What do i add on a page where I have to display since I dont see any shortcode nor any html code to paste.

    Kindly guide.

    Warm Regards

    Giant

  34. 4 months, 25 days ago Andrew Misplon Hi, I Work Here

    If you’re using the SiteOrigin Editor widget which is part of the SiteOrigin Widgets Bundle you can insert the widget into a page using our Page Builder plugin. If you’re using the Classic Editor you’ll find a Page Builder tab next to Visual and Text. Alternatively in the Block Editor, you can insert a SiteOrigin Layout Block. There are lots of options to do this, it depends on how the page is being managed.

  35. 4 months, 25 days ago Giant

    Hi Andrew,

    I am very much impressed with your knowledge and the way you have guided me.

    Thanks a lot for your replies.

    Warm Regards

    Giant

  36. 4 months, 25 days ago Andrew Misplon Hi, I Work Here

    Sure, no problem. All the best with your site.

  37. 4 months, 22 days ago Giant

    Hi Andrew,

    I would like to know how to reduce the gap between the 2 columns.

    I have added 3 columns on bobrupani.com/photos/ in the second row.

    Since the gap is more between two columns image is getting compressed hence, I want to reduce the gap between 2 columns.

    I hope to get the solution to my problem from your end.

    Warm Regards

    Giant

  38. 4 months, 21 days ago Andrew Misplon Hi, I Work Here

    Hi Giant

    The images being squashed is perhaps something you could look into via the plugin documentation or perhaps on the support forum for the plugin that is being used to create the image stack.

    The columns are controlled by the WordPress Block Editor, Vantage isn’t involved in setting the column width or spacing. From what I can see, WordPress is providing a column width setting but is not providing a setting for the gap between columns.

    You can perhaps try inserting a single photo stack into a full-width column and see if that resolves the photo squishing issue.

  39. 4 months, 21 days ago Giant

    Hi Andrew,

    Thanks for your reply.

    I will try to put my query on the WordPress forum.

    Kindly explain “You can perhaps try inserting a single photo stack into a full-width column and see if that resolves the photo squishing issue”.

    As you must have seen that two stacks ( two columns are fine) are fine but with three columns images are squeezed.

    Warm Regards

    Giant

  40. 4 months, 21 days ago Andrew Misplon Hi, I Work Here

    As you must have seen that two stacks ( two columns are fine) are fine but with three columns images are squeezed.
    You’re right. I’m not sure why the stacks plugin isn’t scaling past a certain point. Perhaps that’s by design? Alternatively, you can try inserting a Page Builder block which allows you to adjust the spacing between columns.

  41. 4 months, 21 days ago Giant

    Hi,

    In page-builder there are many types of blocks which one should be chosen so that three columns with less gap ( gutter area) will be visible without distortion.

    Warm Regards

    Giant

  42. 4 months, 20 days ago Andrew Misplon Hi, I Work Here

    Hi Giant

    If you have Page Builder by SiteOrigin installed you can insert a SiteOrigin Layout Block, Gutter can be set in the Row StylesLayoutsection: https://imgur.com/a/HkIEQSn.

  43. 4 months, 20 days ago Giant

    Hi Andrew,

    Thanks for your suggestion but the same option I had tried earlier. Even if the gutter is 0px images are still distorted and on clicking the image its not showing album but only one image.

    You can check the bobrupani.com/photos link and have a comparison of all.

    Kindly suggest a workable solution.

    Warm Regards

    Giant

  44. 4 months, 20 days ago Andrew Misplon Hi, I Work Here

    Hi Giant

    Thanks for the update.

    For assistance with the gallery plugin in use, it would be best to reach out to the author of the plugin. SiteOrigin, unfortunately, isn’t in control of the styling or functionality of the gallery and the gallery images.

    To allow the images more space you can use the Vantage page settings to adjust the Page Layout to Full Width. The page settings are available in the right column when editing the page Page: Page Settings.

  45. 4 months, 20 days ago Giant

    Hi Andrew,

    Thanks for your reply.

    I tried as per your suggestions but the gap is not reducing between albums although page width has increased.

    I thought the gap between columns ( gutter area) is setting through theme and not because of any other factor.

    The column is also part of the theme then there should be some way to control gaps between columns.

    I hope you can throw some light on the points I have mentioned.

    Warm Regards

    Giant

  46. 4 months, 20 days ago Andrew Misplon Hi, I Work Here

    Hi Giant

    The gallery plugin is restricting the image width to 50% of the available space. There is more space available in each column, the restriction in width is being set from the gallery plugin. You can try exploring the gallery plugin options to see if something jumps out at you there. If not, the plugin author should be able to lend a hand. Here is a screenshot of what’s happening: https://imgur.com/a/GMFqFl7.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More