Changing Weight Of Fallback Font To Minimize Unstylized Text Effect

  • Hello. How is it going?

    I using a Google font (Open Sans) and it takes a fraction of a second to load. During this time, a flash of unstylized text shows in the fallback font (Arial). My issue is that the Arial is significantly thicker than the Open Sans. I have the Open Sans set to 300 font-weight (special CSS).

    My question is, how do I get the Arial to appear thinner?

    I read elsewhere that Arial is only supported in 400 and 700 weight.. I’m not sure which Arial weight is flashing.. I just know it looks way thicker than the Open Sans 300. So my understanding is that my custom CSS to shrink the Open Sans us not loading on the Arial.

    Any ideas? I tried a few things online with no success.

    Thanks!

    • This topic was modified 2 years, 11 months ago by consumerista.
    • This topic was modified 2 years, 11 months ago by consumerista.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter consumerista

    (@consumerista)

    This is the code that I have in CSS which makes the title less thick. The Open Sans appears thinner (good), but the secondary text is flashing thicker, perhaps in the original font-weight.

    .page-title, .entry-title {
    color: #6C6969;
    font-weight: 300 !important;
    }

    Thread Starter consumerista

    (@consumerista)

    Not letting edit, but here is default code of .entry-title. I reduced the font-weight to 300.

    `.archive .entry-title,
    .blog .entry-title,
    .search .entry-title {

    font-size: 21px;
    font-size: 2.1rem;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    }`

    • This reply was modified 2 years, 11 months ago by consumerista.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing Weight Of Fallback Font To Minimize Unstylized Text Effect’ is closed to new replies.