🎈 perf: optimize fonts

Author: carlosjorger

public/fonts/Lato-Bold.woff2

@@ -38,7 +38,7 @@ const allPosts = await Astro.glob('../pages/posts/*.md');
 									)}
 									class=" mb-0 p-1 pb-0 text-lg text-lime-200/60  drop-shadow-[0_15px_20px_black] max-sm:text-base"
 								/>
-								<header class="m-1 text-2xl font-extrabold text-teal-200 max-md:text-3xl">
+								<header class="m-1 text-2xl font-bold text-teal-200 max-md:text-3xl">
 									<h3 class="m-0 drop-shadow-[0_15px_20px_black]">
 										{post.frontmatter.title}
 									</h3>

public/fonts/Lato-BoldItalic.woff2

@@ -36,7 +36,7 @@ const { HEADER_EXPERIENCE, EXPERIENCE } = Astro.props;
 								loading="lazy"
 							/>
 						</div>
-						<h3 class="reveal-experience-info my-0.5 text-xl font-semibold text-teal-200">
+						<h3 class="reveal-experience-info my-0.5 text-xl font-bold text-teal-200">
 							{job.ocupation}
 						</h3>
 					</div>

public/fonts/Lato-Italic.woff2

@@ -67,7 +67,7 @@ const {
 				class="m-0 flex min-h-72 w-11/12 flex-col items-start justify-between p-5 transition-[transform] duration-300 group-hover:scale-105 max-sm:w-full max-sm:justify-evenly max-sm:p-4 max-sm:group-hover:scale-105"
 			>
 				<header
-					class="m-1 text-xl font-extrabold text-teal-200 max-sm:text-[1.65rem]"
+					class="m-1 text-xl font-bold text-teal-200 max-sm:text-[1.65rem]"
 				>
 					<h3 class="m-0 text-3xl drop-shadow-[0_15px_20px_black]">
 						{title}

public/fonts/Lato-Regular.woff2

@@ -52,18 +52,6 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 			href="/images/favicon-dark.png"
 			media="(prefers-color-scheme: dark)"
 		/>
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<!-- TODO: Optimize fonts-->
-		<link
-			rel="preload"
-			href="https://fonts.googleapis.com/css?family=Lato:400&display=swap"
-			as="font"
-		/>
-		<link
-			rel="preload"
-			as="font"
-			href="https://fonts.googleapis.com/css?family=Lato:400italic%27&display=swap"
-		/>
 		<link rel="sitemap" href="/sitemap-index.xml" />
 		<meta name="generator" content={Astro.generator} />
 		<link rel="canonical" href={canonicalURL} />

src/components/Articles.astro

@@ -17,6 +17,35 @@
 }
 
 /* || GENERAL STYLES */
+@font-face {
+	font-family: 'Lato';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url("/fonts/Lato-Regular.woff2") format("woff2");
+}
+@font-face {
+	font-family: 'Lato';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url("/fonts/Lato-Italic.woff2") format("woff2");
+}
+
+@font-face {
+	font-family: 'Lato';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url("/fonts/Lato-Bold.woff2") format("woff2");
+}
+@font-face {
+	font-family: 'Lato';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url("/fonts/Lato-BoldItalic.woff2") format("woff2");
+}
 
 h1,
 h2,