Need help? Check out our Support site, then


Jumpy Font--Way to Replace CSS?

  1. Hi there, I'm using the Swell theme, and I'd like to change the font and size of my headings. The problem is when I select a new font and size in the customizer, the headings look great in the preview, but when I load the page in a browser there's a very noticeable jump from the original font and size to the new font in size that's quite distracting.

    Is there a way to override or replace the font in the CSS so that it starts out being the font and size I want, without having to jump?

    Or is there a simple way to get rid of the jump?

    The blog I need help with is eastwestbestvan.com.

  2. Hi kirstenelizabethwiking

    Let's see if changing the font size using CSS gets the correct font size to display immediately.

    Try adding the following:

    h1.entry-title {
        font-size: 3.9em;
    }

    To add custom CSS

    Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  3. Hi kirstenelizabethwiking

    Let's see if changing the font size using CSS gets the correct font size to display immediately.

    Try adding the following:

    h1.entry-title {
        font-size: 3.9em;
    }

    To add custom CSS

    Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  4. Hmm, I added that to the custom CSS area, but it didn't seem to change the size. Also, there's still a jump when the font changes too...

  5. Yes, I see that the jump is still there. Let's try this:

    h1.entry-title {
        font-size: 3.9em !important;
    }
  6. You might also need to change the font settings back to their defaults.

  7. Hmm, well I tried putting both the font and the font size back to the default, and added that code, but it doesn't seem to change anything as best I can tell. Strange!

  8. This should change the blog titles.

    .entry-title {
        font-size: 3.9em !important;
    }
  9. By removing the h1 selector, the CSS rule will apply to more headings on the page.

Topic Closed

This topic has been closed to new replies.

About this Topic