Home>Support>Easy Google font widget

Easy Google font widget

I would like to customize the font of some words using Easy google fonts.
It works while during editing using below css code. I save and publish but after few seconds t goes back to original.
GENERATION YOUNG

URL: http://www.agelessfaceplus.com/about/

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

  1. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Sheila

    Thanks for reaching out. Please, insert the CSS you’re using the square code open and close tags as indicated below the comment field. We’ll take a look from there.

    Thanks

  2. 9 years, 2 months ago sheila

    Here’s the CSS code that I’m using: GENERATION YOUNG

  3. 9 years, 2 months ago sheila

    Hi Andrew,

    I’m not so familiar with CSS. What do you mean with square code open and close tags?

    Sheila

  4. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    In order to display code on the forum you need to wrap your code snippet.

    When you write a reply you’ll notice an instruction sentence below. It reads: Post code snippets between and then provides the tags that you should wrap your code in.

  5. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

  6. 9 years, 2 months ago sheila

    Here’s a sample of the code:

    <span class="about-headline1">GENERATION YOUNG</span>
  7. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    That will work, I just ran a quick test.

    Right now your markup for that heading is:

    <p style="text-align: center;">GENERATION YOUNG
    
    
    

    The widget should have an option at the bottom, a checkbox to not auto add paragraphs. Have you tried disabling that and then inserting your span class in the Text tab of the widget?

  8. 9 years, 1 month ago sheila

    Hi Andrew!

    It worked! but when i check my website on my mobile phone.
    It is not responsive; the letters are jumbled.

    How can I make it responsive

  9. 9 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Glad to hear you’re making progress. Regarding the class name: .about-headline1. Did you insert the !important hacks yourself? If so, are they necessary, try removing them.

    Just at a glance, the left margin you’ve added is a problem on mobile. To remove that on mobile you could say something like:

    @media (max-width: 680px) {
    
    	.about-headline1 {
    	   line-height: normal;
    	   margin-left: 0;
    	}
    
    }
    

    Insert that at Appearance > Custom CSS. It won’t work if you still are using !important in the original rule’s declarations.

  10. 9 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Left margins are an issue with your other rules like .about-headline2 etc. Try using the above logic on those too.

  11. 9 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    More of a custom development task, we’ll do our best to advise :)

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