Change Montserrat font family

  • Resolved truchimochi

    (@truchimochi)


    2 years, 1 month ago

    Dear,

    could you tell me which lines of css code I have to add in the snippet to change at once the default font (Montserrat) by Roboto. Is there a global class that affect the whole form?
    Thanks,

    Now I have this snippet:

    /**
    * The multi-Step form template and the donor dashboard load in an iframe, which prevents theme styles from interfering with their styles.
    * To style them, use this PHP snippet to add inline styles. Replace lines 16-26 with your custom styles.
    */

    function override_iframe_template_styles_with_inline_styles() {
    wp_add_inline_style(
    /**
    * Below, use give-sequoia-template-css to style the multi-step donation form
    * or use give-donor-dashboards-app to style the donor dashboard
    */
    ‘give-sequoia-template-css’,
    ‘
    /* add styles here! A sample (turns the headline text blue): */

    .introduction .headline {
    color: #890452
    }

    /* It changes the donor name on the donor dashboard to green: */

    .give-donor-dashboard-donor-info__details .give-donor-dashboard-donor-info__name {
    color: green;
    }
    ‘
    );
    }

    add_action(‘wp_print_styles’, ‘override_iframe_template_styles_with_inline_styles’, 10);`

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Support Matheus Martins

    (@matheusfd)

    Hi, @truchimochi.

    Glad you reached out. I can help you change the font.

    Using the custom code above, you could try to style the body, button, input and select fields to use the Roboto font. For example, it could look like this:

    body, button, input, select{font-family: 'Roboto', sans-serif;}

    You can also run a search on the give folder under wp-content/plugins/give and search for places where Montserrat was set and get the information about what you will need to change in your custom code.

    ?Please let us know if you have further questions or need additional assistance!

    Thread Starter truchimochi

    (@truchimochi)

    Hi, Matheus

    with this code the site breaks…

    How can I run a search looking for Montserrat inside the files? I know look for file names with Filezilla, but not look for text inside the files…

    thanks,

    Plugin Support Matheus Martins

    (@matheusfd)

    Hi, @truchimochi.

    With which code? The code I shared with you, you need to use inside the code you shared with me, and if it broke, most likely you missed something when adding it. Use this one as a reference https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/style-givewp-iframes.php.

    And to run a search, you might need to download GiveWP and open it with a text editor like Sublime text. There you will be able to look for the text you need.

    Thanks for using GiveWP! Have a great day.

    Thread Starter truchimochi

    (@truchimochi)

    Hi Matheus,

    with the code you give me:
    body, button, input, select{font-family: ‘Roboto’, sans-serif;}

    Insert in the line 21 of the snippet.

    Also I tried like this:
    body, button, input, select {
    font-family: ‘Roboto’, sans-serif;
    }

    Also like this:
    .body, .button, .input, .select {
    font-family: ‘Roboto’, sans-serif;
    }

    but always break the site…

    ?Any idea?

    Plugin Support Matheus Martins

    (@matheusfd)

    Hey!

    most likely this is happening because you are using single quotes. Try with double quotes on the CSS part:

    body, button, input, select {
    font-family: “Roboto”, sans-serif;
    }

    Looking forward to helping you get to the bottom of this!

    Thread Starter truchimochi

    (@truchimochi)

    Ok thats right, now the code doesn′t break the site.

    But the font doesn′t change…

    It appears a sans-serif but not Roboto font…

    I have add the !important but still not working

    body, button, input, select {
    font-family: “Roboto”, sans-serif !important;
    }

    Plugin Support Matheus Martins

    (@matheusfd)

    Hi, @truchimochi.

    It’s because you are not importing the font on your site. Here is a code that would do the trick:

    https://gist.github.com/matheuswd/918ea3471f42344b4e801c56fbcc5022

    Code below too:

    function change_font_to_Roboto() {
    wp_add_inline_style(
        /**
         *  Below, use give-sequoia-template-css to style the multi-step donation form
         *  or use give-donor-dashboards-app to style the donor dashboard
         */
        'give-sequoia-template-css',
        '
	@import url("https://fonts.googleapis.com/css?family=Roboto");

        body, button, input, select, .give-donation-summary-section {
			font-family: “Roboto”, sans-serif;
		}
        '
    );
}

add_action('wp_print_styles', 'change_font_to_Roboto', 10);

    ?Please let us know if you have further questions or need additional assistance!

    Thread Starter truchimochi

    (@truchimochi)

    Sorry Matheu, but it still nor working…

    Plugin Support Matheus Martins

    (@matheusfd)

    Hey @truchimochi.

    Can you record a quick screencast showing what you are doing and what are the results? I’ve used the code I shared with you and it worked correctly on my end.

    Thread Starter truchimochi

    (@truchimochi)

    Her you are:
    https://www.dropbox.com/s/qbjl5vb2doy4msr/Grabaci%C3%B3n%20de%20pantalla%202022-10-21%20a%20las%2018.16.51.mov?dl=0

    It seems it is all OK but the font is not Roboto…

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Change Montserrat font family’ is closed to new replies.