Skip to content

Instantly share code, notes, and snippets.

@rankun203

rankun203/font-face-observer.html

Last active December 14, 2016 10:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rankun203/4a747ea35e47463fcb4e3eb0e5ed5327 to your computer and use it in GitHub Desktop.
Save rankun203/4a747ea35e47463fcb4e3eb0e5ed5327 to your computer and use it in GitHub Desktop.
Download ZIP
Professional Web Typography Notes
Raw
font-face-observer.html
<!DOCTYPE html>
<!--#if expr="$HTTP_COOKIE=/fonts\-loaded\=true/" -->
<html lang="en" class="fonts-loaded">
<!--#else -->
<html lang="en">
<!--#endif -->
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@font-face {
font-family: 'Lora';
src: url('lora-regular.woff2') format('woff2'),
url('lora-regular.woff') format('woff'),
url('lora-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Lora';
src: url('lora-italic.woff2') format('woff2'),
url('lora-italic.woff') format('woff'),
url('lora-italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
body {
font-family: serif;
}
.fonts-loaded body {
font-family: Lora, serif;
}
</style>
</head>
<body>
<p><!-- paragraph text --></p>
<script src="fontfaceobserver.js"></script>
<script>
(function( w ){
if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ){
return;
}
var font1 = new w.FontFaceObserver( "Lora", {
weight: 400
});
var font2 = new w.FontFaceObserver( "Lora", {
weight: 400,
style: "italic"
});
w.Promise
.all([font1.check(), font2.check()])
.then(function(){
w.document.documentElement.className += " fonts-loaded";
});
}( this ));
</script>
</body>
</html>
Raw
web-font-loader.html
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Lora:400,700,400italic,700italic:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<noscript>
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
</noscript>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment