mirror of
https://github.com/d0zingcat/nextjs-notion-starter-kit.git
synced 2026-05-14 07:26:43 +00:00
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import React from 'react'
|
|
import Head from 'next/head'
|
|
import * as types from '../lib/types'
|
|
|
|
export const CustomFont: React.FC<{ site: types.Site }> = ({ site }) => {
|
|
if (!site.fontFamily) {
|
|
return null
|
|
}
|
|
|
|
// https://developers.google.com/fonts/docs/css2
|
|
const fontFamilies = [site.fontFamily]
|
|
const googleFontFamilies = fontFamilies
|
|
.map((font) => font.replace(/ /g, '+'))
|
|
.map((font) => `family=${font}:ital,wght@0,200..700;1,200..700`)
|
|
.join('&')
|
|
const googleFontsLink = `https://fonts.googleapis.com/css?${googleFontFamilies}&display=swap`
|
|
const cssFontFamilies = fontFamilies.map((font) => `"${font}"`).join(', ')
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<link rel='stylesheet' href={googleFontsLink} />
|
|
|
|
<style>{`
|
|
.notion.notion-app {
|
|
font-family: ${cssFontFamilies}, -apple-system, BlinkMacSystemFont,
|
|
'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
|
|
'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
}
|
|
`}</style>
|
|
</Head>
|
|
</>
|
|
)
|
|
}
|