Skip to content

Instantly share code, notes, and snippets.

@telagraphic

telagraphic/index.html

Created August 15, 2019 00:50
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 telagraphic/5b1a548329e54b4c8548fb3e9d95ce6c to your computer and use it in GitHub Desktop.
Save telagraphic/5b1a548329e54b4c8548fb3e9d95ce6c to your computer and use it in GitHub Desktop.
Download ZIP
Web Font 2 Stage Loading
Raw
index.html
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<title>Nick Lyons Blogfolio</title>
<link rel="canonical" href="https://www.telagraphic.com">
<meta name="description" content="Front end learnings on UI/UX, Code and Design">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="{{site.baseurl}}css/main.css">
<link rel="preload" href="{{site.baseurl}}assets/fonts/PublicSans-ThinItalic.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{site.baseurl}}assets/fonts/PublicSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{site.baseurl}}assets/fonts/PublicSans-ExtraLight.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: "Public Sans";
src: "url(assets/fonts/PublicSans-ExtraLight.woff2) format('woff2'), url(assets/fonts/PublicSans-ExtraLight.woff) format('woff')";
font-display: swap;
font-weight: 200;
}
@font-face {
font-family: "Public Sans";
src: "url(assets/fonts/PublicSans-Bold.woff2) format('woff2'), url(assets/fonts/PublicSans-Bold.woff) format('woff')";
font-display: swap;
font-weight: 600;
}
@font-face {
font-family: "Public Sans";
src: "url(assets/fonts/PublicSans-ExtraBold.woff2) format('woff2'), url(assets/fonts/PublicSans-ExtraBold.woff) format('woff')";
font-display: swap;
font-weight: 800;
}
</style>
<script>
(function() {
if ("fonts" in document) {
const thin = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-Thin.woff2) format('woff2'), url(assets/fonts/PublicSans-Thin.woff) format('woff')", {
weight: "100"
}
);
const thinItalic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-ThinItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-ThinItalic.woff) format('woff')", {
weight: "100",
style: "italic"
}
);
const extraLightItalic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-ExtraLightItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-ExtraLightItalic.woff) format('woff')", {
weight: "200",
style: "italic"
}
);
const extraLight = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-ExtraLight.woff2) format('woff2'), url(assets/fonts/PublicSans-ExtraLight.woff) format('woff')", {
weight: "200"
}
);
const light = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-Light.woff2) format('woff2'), url(assets/fonts/PublicSans-Light.woff) format('woff')", {
weight: "300"
}
);
const lightItalic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-LightItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-LightItalic.woff) format('woff')", {
weight: "300",
style: "italic"
}
);
const italic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-Italic.woff2) format('woff2'), url(assets/fonts/PublicSans-Italic.woff) format('woff')", {
style: "italic"
}
);
const medium = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-Medium.woff2) format('woff2'), url(assets/fonts/PublicSans-Medium.woff) format('woff')", {
weight: "400"
}
);
const mediumItalic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-MediumItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-MediumItalic.woff) format('woff')", {
weight: "400",
style: "italic"
}
);
const regular = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-Regular.woff2) format('woff2'), url(assets/fonts/PublicSans-Regular.woff) format('woff')", {
weight: "500"
}
);
const bold = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-Bold.woff2) format('woff2'), url(assets/fonts/PublicSans-Bold.woff) format('woff')", {
weight: "600"
}
);
const boldItalic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-BoldItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-BoldItalic.woff) format('woff')", {
weight: "600",
style: "italic"
}
);
const semiBold = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-SemiBold.woff2) format('woff2'), url(assets/fonts/PublicSans-SemiBold.woff) format('woff')", {
weight: "700"
}
);
const semiBoldItalic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-SemiBoldItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-SemiBoldItalic.woff) format('woff')", {
weight: "700",
style: "italic"
}
);
const extraBold = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-ExtraBold.woff2) format('woff2'), url(assets/fonts/PublicSans-ExtraBold.woff) format('woff')", {
weight: "800"
}
);
const extraBoldItalic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-ExtraBoldItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-ExtraBoldItalic.woff) format('woff')", {
weight: "800",
style: "italic"
}
);
const black = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-Black.woff2) format('woff2'), url(assets/fonts/PublicSans-Black.woff) format('woff')", {
weight: "900"
}
);
const blackItalic = new FontFace(
"Public Sans",
"url(assets/fonts/PublicSans-BlackItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-BlackItalic.woff) format('woff')", {
weight: "900",
style: "italic"
}
);
Promise.all([
thin.load(),
thinItalic.load(),
extraLightItalic.load(),
extraLight.load(),
light.load(),
lightItalic.load(),
italic.load(),
medium.load(),
mediumItalic.load(),
regular.load(),
bold.load(),
boldItalic.load(),
semiBold.load(),
semiBoldItalic.load(),
extraBold.load(),
extraBoldItalic.load(),
black.load(),
blackItalic.load()
]).then(function(loadedFonts) {
loadedFonts.forEach(function(font) {
document.fonts.add(font);
});
});
}
})();
</script>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment