feat: fetch font from github

This commit is contained in:
AykutSarac 2023-08-16 12:00:01 +03:00
parent 2b8ed62606
commit 5e2eab040a
No known key found for this signature in database
6 changed files with 11 additions and 17 deletions

Binary file not shown.

View File

@ -1,12 +1,4 @@
import { Fira_Mono } from "next/font/google"; import { Fira_Mono } from "next/font/google";
import localFont from "next/font/local";
const monaSans = localFont({
src: "../assets/fonts/Mona-Sans.woff2",
variable: "--mona-sans",
display: "swap",
fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
});
const firaMono = Fira_Mono({ const firaMono = Fira_Mono({
weight: ["500"], weight: ["500"],
@ -14,4 +6,4 @@ const firaMono = Fira_Mono({
display: "swap", display: "swap",
}); });
export { monaSans, firaMono }; export { firaMono };

View File

@ -2,7 +2,6 @@ import React from "react";
import { ThemeProvider } from "styled-components"; import { ThemeProvider } from "styled-components";
import { MantineProvider, MantineThemeOverride } from "@mantine/core"; import { MantineProvider, MantineThemeOverride } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { monaSans } from "src/constants/fonts";
import { lightTheme, darkTheme } from "src/constants/theme"; import { lightTheme, darkTheme } from "src/constants/theme";
import useStored from "src/store/useStored"; import useStored from "src/store/useStored";
@ -16,9 +15,9 @@ const queryClient = new QueryClient({
}); });
const mantineTheme: MantineThemeOverride = { const mantineTheme: MantineThemeOverride = {
fontFamily: monaSans.style.fontFamily, fontFamily: "'Mona-Sans', sans-serif",
headings: { headings: {
fontFamily: monaSans.style.fontFamily, fontFamily: "'Mona-Sans', sans-serif",
}, },
components: { components: {
Divider: { Divider: {

View File

@ -1,13 +1,12 @@
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import styled from "styled-components"; import styled from "styled-components";
import { monaSans } from "src/constants/fonts";
const StyledTitle = styled.div<{ fontSize: string }>` const StyledTitle = styled.div<{ fontSize: string }>`
font-weight: 900; font-weight: 900;
margin: 0; margin: 0;
color: ${({ theme }) => theme.INTERACTIVE_HOVER}; color: ${({ theme }) => theme.INTERACTIVE_HOVER};
font-family: ${monaSans.style.fontFamily}; font-family: "Mona-Sans", sans-serif;
font-size: ${({ fontSize }) => fontSize}; font-size: ${({ fontSize }) => fontSize};
white-space: nowrap; white-space: nowrap;
`; `;

View File

@ -6,7 +6,6 @@ import { StyleSheetManager, ThemeProvider } from "styled-components";
import { MantineProvider, MantineThemeOverride } from "@mantine/core"; import { MantineProvider, MantineThemeOverride } from "@mantine/core";
import { SessionContextProvider, Session } from "@supabase/auth-helpers-react"; import { SessionContextProvider, Session } from "@supabase/auth-helpers-react";
import ReactGA from "react-ga4"; import ReactGA from "react-ga4";
import { monaSans } from "src/constants/fonts";
import GlobalStyle from "src/constants/globalStyle"; import GlobalStyle from "src/constants/globalStyle";
import { lightTheme } from "src/constants/theme"; import { lightTheme } from "src/constants/theme";
import { supabase } from "src/lib/api/supabase"; import { supabase } from "src/lib/api/supabase";
@ -23,8 +22,8 @@ const ModalController = dynamic(() => import("src/layout/ModalController"));
const mantineTheme: MantineThemeOverride = { const mantineTheme: MantineThemeOverride = {
colorScheme: "light", colorScheme: "light",
fontFamily: monaSans.style.fontFamily, fontFamily: "'Mona-Sans', sans-serif",
headings: { fontFamily: monaSans.style.fontFamily }, headings: { fontFamily: "'Mona-Sans', sans-serif" },
primaryShade: 8, primaryShade: 8,
}; };

View File

@ -52,6 +52,11 @@ class MyDocument extends Document {
<meta name="theme-color" content="#36393E" /> <meta name="theme-color" content="#36393E" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link
href="https://github.githubassets.com/static/fonts/github/mona-sans.woff2"
rel="stylesheet"
crossOrigin="anonymous"
/>
</Head> </Head>
<body> <body>
<Main /> <Main />