Font render after page (contents) renders

StackOverflow https://stackoverflow.com//questions/25078055

  •  02-01-2020
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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

Link

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top