Jumpy Font–Way to Replace CSS?

  • Author
    Posts
  • #2983174

    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.

    #2983408

    g471n
    Member

    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.

    #2983409

    g471n
    Member

    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.

    #2983411

    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…

    #2983414

    g471n
    Member

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

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

    #2983415

    g471n
    Member

    You might also need to change the font settings back to their defaults.

    #2983416

    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!

    #2983417

    g471n
    Member

    This should change the blog titles.

    .entry-title {
        font-size: 3.9em !important;
    }
    #2983418

    g471n
    Member

    By removing the h1 selector, the CSS rule will apply to more headings on the page.

The topic ‘Jumpy Font–Way to Replace CSS?’ is closed to new replies.