Switching font to Google Fonts directly

#74

Author: Antonio-Laguna

src/pages/index.astro

@@ -11,8 +11,14 @@ import ModeToggler from '../components/mode-toggler.astro';
 	<meta charset="utf-8">
 	<title>cssdb - CSS Database</title>
 	<meta name="description" content="A comprehensive list of CSS features and their positions in the process of becoming implemented web standards.">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 	<link rel="preconnect" href="https://d32ekf2zat2q3c.cloudfront.net" crossorigin />
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap" crossorigin />
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap" media="print" onload="this.media='all'" crossorigin />
+	<noscript>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap" crossorigin />
+	</noscript>
 	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<meta name="twitter:card" content="summary_large_image">

src/styles/style.css

@@ -30,47 +30,12 @@
 	src: local("Avenir Next Bold Italic"), local("AvenirNext-BoldItalic"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-Bold.woff2") format("woff2"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-Bold.woff") format("woff");
 }
 
-@font-face {
-	font-display: swap;
-	font-family: "Source Code Pro";
-	font-style: normal;
-	font-weight: 600;
-	src: local("Source Code Pro Semibold"), local("SourceCodePro-Semibold"), url("https://fonts.gstatic.com/s/sourcecodepro/v8/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_Dvecq7Gq0DDzS.woff2") format("woff2"), url("https://fonts.gstatic.com/s/sourcecodepro/v8/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_Ds-cs.woff") format("woff");
-	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-	font-display: swap;
-	font-family: "Source Code Pro";
-	font-style: normal;
-	font-weight: 600;
-	src: local("Source Code Pro Semibold"), local("SourceCodePro-Semibold"), url("https://fonts.gstatic.com/s/sourcecodepro/v8/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_Ds-cq7Gq0DA.woff2") format("woff2"), url("https://fonts.gstatic.com/s/sourcecodepro/v8/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_Ds-cs.woff") format("woff");
-	unicode-range:
-		U+0000-00FF,
-		U+0131,
-		U+0152-0153,
-		U+02BB-02BC,
-		U+02C6,
-		U+02DA,
-		U+02DC,
-		U+2000-206F,
-		U+2074,
-		U+20AC,
-		U+2122,
-		U+2191,
-		U+2193,
-		U+2212,
-		U+2215,
-		U+FEFF,
-		U+FFFD;
-}
-
 /* Document
 /* ========================================================================== */
 
 html {
 	--main-font: "Avenir Next", sans-serif;
-	--code-font: "Source Code Pro", "Andale Mono WT", "Andale Mono", "Consolas", "Lucida Console", monospace, monospace;
+	--code-font: "Source Code Pro", "Andale Mono WT", "Andale Mono", "Consolas", "Lucida Console", monospace;
 
 	scroll-behavior: smooth;
 
@@ -456,7 +421,7 @@ img {
 		display: none;
 	}
 
-	& + .cssdb-browser:not(:last-child) {
+	&:not(:last-child) {
 		margin-inline-end: 6px;
 	}