modificacion a fonts en archivo globales

2025-10-23 15:35:17 -06:00
parent 4653229f01
commit 4f1da26c22
2 changed files with 51 additions and 37 deletions
@@ -1,14 +1,18 @@
 import Header from "../components/header";
+import { Inter, Montserrat } from "next/font/google";
+import "../app/styles/base/_globales.scss"; // si tienes estilos globales

-
+// Carga optimizada de fuentes
+const inter = Inter({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-inter" });
+const montserrat = Montserrat({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-montserrat" });

 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
-    <html lang="es">
+    <html lang="es" className={`${inter.variable} ${montserrat.variable}`}>
      <body>
        <Header />
-       {children}
+        {children}
      </body>
    </html>
-  )
+  );
 }
@@ -1,59 +1,69 @@
-
 html {
-    font-size: 62.5%;
-    box-sizing: border-box;
-    scroll-padding-top: 0rem;
+  font-size: 62.5%;
+  box-sizing: border-box;
+  scroll-padding-top: 0rem;
 }
+
 *, 
 *:before,
 *:after {
-        margin: 0;
-    padding: 0;
-    box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
 }
+
 body {
+  font-family: 'Inter', sans-serif; /* 👈 Fuente principal */
+  font-style: normal;
+  font-size: 2rem;
+  font-optical-sizing: auto;

-    font-optical-sizing: auto;
-    font-style: normal;
-
-    font-size: 2rem;
-
-    &.overflow-hidden {
-        overflow: hidden;
-    }
+  &.overflow-hidden {
+    overflow: hidden;
+  }
 }
+
 p {
-    font-size: 2rem;
-    line-height: 1.5;
+  font-size: 2rem;
+  line-height: 1.5;
 }
+
 .contenedor {
-    width: 95%;
-    max-width: 120rem;
-    margin: 0 auto;
+  width: 95%;
+  max-width: 120rem;
+  margin: 0 auto;
 }
+
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
+
 h1, h2, h3 {
-    margin: 0 0 5rem 0;
-    font-weight: 900;
+  margin: 0 0 5rem 0;
+  font-weight: 900;
+  font-family: 'Montserrat', sans-serif; /* 👈 Títulos con Montserrat */
 }
+
 h1 {
-    font-size: 4rem;
+  font-size: 4rem;
 }
+
 h2 {
-    font-size: 4.6rem;
+  font-size: 4.6rem;
 }
+
 h3 {
-    font-size: 6rem;
-    text-align: center;
+  font-size: 6rem;
+  text-align: center;
 }
+
 img {
-    max-width: 100%;
-    width: 100%;
-    height: auto;
-    display: block;
+  max-width: 100%;
+  width: 100%;
+  height: auto;
+  display: block;
 }
+
 body > section {
-    padding: 10rem 0
-}
+  padding: 10rem 0;
+}