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>