Google fonts loading


#1

Hi all,

I am using google fonts and I am seeing an issue with the loading order. When the page is displayed, it uses a default font, a few seconds later the google font is loaded and used. How can I be sure the text is displayed only when the fonts are loaded ?

I am using a basic layout with Iron router as follows:

<template name="ApplicationLayout">
  {{> yield "navigationRegion"}}
  {{> yield}}
  {{> yield "footerRegion"}}
</template>

Inside the Navigation template I added:

  <head>
    <link rel='icon' sizes="16x16 32x32" href='/favicon.ico'>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700" type='text/css'>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700" type='text/css'> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900" type='text/css'>
  </head>