Custom font rendering

• 

  evoecology · Member · Apr 8, 2016 at 2:06 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’ve customized a child theme from the “Engrave-lite” template. I’m using a custom font with @font-face in my child css style.

  h1 {
    font-family: bebas_neuebold, Helvetica, sans-serif; color: #000000; font-size: 35px !important;
  }

  #logo h1 {
  	font-size: 82px !important;
  	line-height: 0.7;
  	font-weight: normal;
  }

  When the page loads logo h1 defaults to “sans-serif” (which is much larger) for a split second before jumping to my custom font which causes the menu bar to appear larger than it should then shrink, this causes the content below to jump.

  Ive read guides about speeding up rendering of custom fonts, to be honest the speed isnt the issue, its just this rendering issue (is “rendering” the corect term?)

  I’m afraid my site isnt live yet, so no links, but any general advice is much appreciated, thanks

  The blog I need help with is: (visible only to logged in users)