xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 16:51:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add google fonts with tailwind css

Browse Source
This commit is contained in:
DefectingCat
2023-03-20 17:02:46 +08:00
parent 0a10f71af6
commit b19c1f9099
3 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/fonts.ts
View File

@ -8,24 +8,44 @@ import {
export const aleo = Aleo({
weight: ['300', '400', '700'],
variable: '--font-aleo',
display: 'swap',
subsets: ['latin'],
});
export const aref_ruqaa = Aref_Ruqaa({
weight: ['400', '700'],
variable: '--font-aref-ruqaa',
display: 'swap',
subsets: ['latin'],
});
export const barlow = Barlow({
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
style: 'italic',
variable: '--font-barlow',
display: 'swap',
subsets: ['latin'],
});
export const jetbrains_mono = JetBrains_Mono({
display: 'swap',
variable: '--font-jetbrains-mono',
subsets: ['latin'],
});
export const poppins = Poppins({
weight: ['300', '400', '700', '100', '200', '500', '600', '800', '900'],
variable: '--font-poppins',
subsets: ['latin'],
});
const fonts = {
aleo,
aref_ruqaa,
barlow,
jetbrains_mono,
poppins,
};
export default fonts;

7
app/layout.tsx
View File

@ -4,6 +4,8 @@ import RUAThemeProvider from './theme-provider';
import HeadBar from 'components/nav-bar';
import Footer from 'components/footer';
import BackToTop from 'components/common/back-to-top';
import clsx from 'clsx';
import fonts from './fonts';
export default function RootLayout({
children,
@ -11,7 +13,10 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en">
<html
lang="en"
className={clsx(Object.values(fonts).map((font) => font.variable))}
>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />

10
tailwind.config.js
View File

@ -9,11 +9,11 @@ module.exports = {
theme: {
extend: {
fontFamily: {
Aleo: ['Aleo', 'serif'],
'Aref-Ruqaa': ['Aref Ruqaa', 'serif'],
Barlow: ['Barlow', 'sans-serif'],
Poppins: ['Poppins', 'sans-serif'],
Mono: ['JetBrains Mono', '-apple-system', 'monospace'],
Aleo: ['--font-aleo'],
'Aref-Ruqaa': ['var(--font-aref-ruqaa)'],
Barlow: ['var(--font-barlow)'],
Poppins: ['var(--font-poppins)'],
Mono: ['var(--fonts-jetbrains-mono)', '-apple-system', 'monospace'],
},
colors: {
bluish: {