Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/index.html

Created June 17, 2022 18:19
Show Gist options
  • Save prof3ssorSt3v3/c1a5228dd329b647c80381aad40472f8 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/c1a5228dd329b647c80381aad40472f8 to your computer and use it in GitHub Desktop.
Download ZIP
Using unicode-range with your Google Fonts to reduce bandwidth and improve page load speed.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- preconnect for fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<title>Font Efficiencies with Unicode-Range</title>
<!-- load css and import fonts -->
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<h1>Over <span>&amp;</span> Out</h1>
</header>
<main>
<h2>Over <span>&amp;</span> Out</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque,
autem. Ipsum illo iusto consectetur odit libero voluptates alias
doloribus aliquam nulla ab, exercitationem cum tenetur numquam et
placeat possimus eaque!
</p>
<p>
Using Raleway as the body text font, EB Garamond for my titles, and
Playfair Display for the Ampersands in the titles.
</p>
</main>
<footer>
<p>&copy; 2022</p>
</footer>
</body>
</html>
Raw
main.css
/* load a google font for the titles */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400&text=%26&display=swap");
/* load a font range for the ampersands */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400&text=Overut&display=swap");
/* load a font for the rest of the page. */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap");
* {
box-sizing: border-box;
}
html {
font-size: 20px;
font-family: "Raleway", sans-serif;
font-weight: 300;
}
h1,
h2 {
font-family: "EB Garamond", serif;
font-weight: 400;
font-style: italic;
}
:is(h1, h2) span {
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: 150%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment