Jumpy Font–Way to Replace CSS?

• 

  kirstenelizabethwiking · Member · Jul 6, 2017 at 2:11 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  g471n · Member · Jul 6, 2017 at 6:24 am

  • Copy link

  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.

• 

  g471n · Member · Jul 6, 2017 at 6:24 am

  • Copy link

  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.

• 

  kirstenelizabethwiking · Member · Jul 6, 2017 at 6:30 am

  • Copy link

  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…

• 

  g471n · Member · Jul 6, 2017 at 6:38 am

  • Copy link

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

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

• 

  g471n · Member · Jul 6, 2017 at 6:41 am

  • Copy link

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

• 

  kirstenelizabethwiking · Member · Jul 6, 2017 at 6:46 am

  • Copy link

  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!

• 

  g471n · Member · Jul 6, 2017 at 6:56 am

  • Copy link

  This should change the blog titles.

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

• 

  g471n · Member · Jul 6, 2017 at 7:09 am

  • Copy link

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