WordPress.org

Forums

Easy Google Fonts
[resolved] How to add !important to efg generated styles? (7 posts)

  1. WebTrooper
    Member
    Posted 1 year ago #

    I'm trying EGF on a multisite with a lot of different themes and finding the h tags (h1-h6) don't work on most themes. I'm able to add !important using Crome's code inspector and that does work. How can I add !important to the styles generated by EGF?

    Thanks! :)

    https://wordpress.org/plugins/easy-google-fonts/

  2. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,
    Thanks for starting a new thread. I'm not sure if you are aware but you can use this plugin to create custom font controls without coding.

    Example: Lets say I want to control a <h1> tag with the id site-title, here is what I would do:

    Instructions: Creating a custom font control for your site title:

    1. Log in to your WordPress admin area and go to: Settings > Google Fonts
    2. Click create new font control and give your font control a name e.g Site Title and click the Create Font Control button. (If no other custom font controls exist then it will take you straight to the add new control screen)
    3. Once you have created your new font control enter the following text in the Add CSS Selectors input box: h1#site-title (Press tab after each selector)
    4. Click the Save Font Control button
    5. Visit the customizer and you will see your new font control which will allow you to control the site title

    I hope that makes sense, if you still want to add !important suffix to each of the default controls please let me know and I will give you a code snippet to put in your theme. If you have any questions just give me a shout. Please let me know how you get on. Cheers

    Sunny

  3. WebTrooper
    Member
    Posted 1 year ago #

    Thanks for the quick response. I was exploring new font controllers but it does not address my question. I wish to add !important to the styles generated by EGF. In other words, I need

    'h1 {
    font-family: Poller One;
    font-weight: 400;
    font-style: normal;
    }'

    to be written as

    'h1 {
    font-family: Poller One !important;
    font-weight: 400 !important;
    font-style: normal !important;
    }'

    I'm assuming I would need to hack the code directly but I don't know what code in what files I should be looking at. I'm pretty sure I can make it work if I just know where to look.

    Thanks

  4. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 1 year ago #

    Hi WebTrooper,
    No you wouldn't need to hack any code in our plugin you can just add a filter in your themes functions.php file. Here is how you would do that (add this php function in your theme):

    function custom_egf_force_styles( $force_styles ) {
        return true;
    }
    add_filter( 'tt_font_force_styles', 'custom_egf_force_styles' );

    Sunny

  5. WebTrooper
    Member
    Posted 1 year ago #

    This works perfect. Thanks! :)

  6. Sunny Johal - Titanium Themes
    Member
    Plugin Author

    Posted 1 year ago #

    Hi WebTrooper,
    My pleasure. As you have got it working I am going to mark this issue as resolved. Cheers

    Sunny

  7. avrdev
    Member
    Posted 1 year ago #

    A second thanks - I used this function as well!

    =Alan R.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Easy Google Fonts
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic