0

My page contents are rendered before the font renders even i have placed fonts on the top Here are my codes...

<!doctype html>
<html>
<head>
<title>Computer Stuffs Developer Profile</title>
<?php include_once('includes.php');?>
<link rel="stylesheet" href="css/projects.css" />

includes.php file contain

<link href='http://fonts.googleapis.com/css?family=Tangerine|Indie+Flower|Kaushan+Script' rel='stylesheet' type='text/css'>
<!--[if IE]>
        <script src="js/ie_html5.js"></script>
    <![endif]-->
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="stylesheet" href="css/universal.css" />
<link rel="stylesheet" href="css/hyperlinks.css" />

Previously my fonts were below html5.js now i have moved it on top and i am still facing problem.. i cleared my cache and tired.

user3811305
  • 1
  • 3
  • Have you tried a local downloaded font ? Test the otf/eot/svg versions. – Matteo Conta Aug 01 '14 at 10:26
  • Can i get google fonts in these formats? – user3811305 Aug 01 '14 at 10:35
  • Appears to be a duplicate... of http://stackoverflow.com/questions/11711641/avoid-delayed-load-of-font-face I suppose. – Jukka K. Korpela Aug 01 '14 at 11:20
  • Download from google and then use an online font converter service. Example : go to https://www.google.com/fonts#UsePlace:use/Collection:Indie+Flower click on the "Download fonts" arrow, choose zip format. Next search for "online font converter" and convert it to your desired format. – Matteo Conta Aug 01 '14 at 13:24

2 Answers2

0

You can add a wait panel that covers the 100% of the page and on the "ready" event you can remove the panel and show the page correctly rendered.

Matteo Conta
  • 1,423
  • 13
  • 17
0

I would suggest you to cache the fonts. Here is a good article about performance in loading fonts with examples:

Link

Mihey Egoroff
  • 1,542
  • 14
  • 23