Home-theater-designers
웹 글꼴은 웹사이트에 사용자 정의 글꼴을 추가하는 좋은 방법입니다. 이러한 글꼴은 사용자 시스템에서 사용하지 못할 수 있으므로 이를 호스팅하거나 CDN을 통해 참조하여 프로젝트에 포함해야 합니다.
이 두 가지 방법을 사용하여 Next.js 웹 사이트에 웹 글꼴을 포함하는 방법을 알아보세요.
MAKEUSEOF 오늘의 비디오
Next.js에서 자체 호스팅 글꼴 사용
Next.js에 자체 호스팅 글꼴을 추가하려면 다음을 수행해야 합니다. @font-face CSS 규칙 사용 . 이 규칙을 사용하면 웹 페이지에 사용자 정의 글꼴을 추가할 수 있습니다.
나는 스마트 TV를 원하지 않는다
font-face를 사용하기 전에 사용하려는 글꼴을 다운로드해야 합니다. 많이있다 무료 글꼴을 제공하는 인터넷 사이트 , Google 글꼴, fontspace 및 dafont 웹사이트를 포함합니다.
웹 글꼴을 다운로드한 후 여러 브라우저를 지원하도록 다른 글꼴 형식으로 변환합니다. 당신이 사용할 수있는 무료 온라인 글꼴 변환 도구 그렇게 하기 위해. 최신 웹 브라우저는 .woff 및 .woff2 형식을 지원합니다. 레거시 브라우저를 지원해야 하는 경우 .eot 및 .ttf 형식도 제공해야 합니다.
라는 새 폴더를 만듭니다. 글꼴 사이트 디렉토리에 변환된 글꼴 파일을 저장합니다.
다음 단계는 글꼴을 포함하는 것입니다. 스타일/global.css 전체 웹사이트에서 사용할 수 있도록 파일을 만듭니다. 이 예에서는 인어 글꼴의 글꼴을 굵게 표시합니다.
@font-face {
font-family: 'Mermaid';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
url('Mermaid-Bold.woff2') format('woff2'),
url('Mermaid-Bold.woff') format('woff'),
url('Mermaid-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
글꼴 파일을 포함하면 구성 요소 수준 CSS 파일에서 해당 글꼴을 사용할 수 있습니다.
h1 {
font-family: Mermaid;
}CDN을 통해 Next.js에 웹 글꼴 포함
일부 웹 사이트는 앱으로 가져올 수 있는 CDN을 통해 웹 글꼴을 제공합니다. 이 접근 방식은 글꼴을 다운로드하거나 글꼴을 만들 필요가 없기 때문에 설정하기 쉽습니다. 또한 Google 글꼴이나 TypeKit을 사용하는 경우 Next.js가 자동으로 최적화를 처리합니다.
링크 태그 또는 CSS 파일 내의 @import 규칙을 사용하여 CDN에서 글꼴을 추가할 수 있습니다.
잠들기 좋은 영화
링크 태그를 사용하여 Next.js 프로젝트에 글꼴을 가져오는 방법
link 태그는 항상 HTML 문서의 head 태그 안에 있습니다. Next.js에 head 태그를 추가하려면 사용자 지정 문서를 만들어야 합니다. 이 문서는 각 페이지를 렌더링하는 데 사용되는 head 및 body 태그를 수정합니다.
파일을 만들어 이 사용자 정의 문서 기능을 사용하십시오. /pages/_document.js.
그런 다음 _document.js 파일의 헤드에 글꼴에 대한 링크를 포함합니다.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;@import 규칙을 사용하여 Next.js 프로젝트에 글꼴을 포함하는 방법
또 다른 옵션은 글꼴을 사용하려는 CSS 파일에서 @import 규칙을 사용하는 것입니다.
예를 들어, 웹 글꼴을 가져오기하여 전체 프로젝트에서 글꼴을 사용할 수 있도록 합니다. 스타일/global.css 파일.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
이제 다음에서 글꼴 모음을 참조할 수 있습니다. CSS 선택기 이와 같이:
h1 {
font-family:'Libre Caslon Display', serif;
}@import 규칙을 사용하면 포함된 CSS 파일의 글꼴을 가져올 수 있습니다. 링크 태그를 사용하면 전체 사이트에서 글꼴에 액세스할 수 있습니다.
Windows 10 액세스 용이성 업그레이드
글꼴을 로컬로 호스팅해야 합니까 아니면 CDN을 통해 가져와야 합니까?
로컬에서 호스팅되는 글꼴은 일반적으로 CDN에서 가져온 글꼴보다 빠릅니다. 웹 페이지가 로드되면 브라우저가 글꼴 CDN에 대해 추가 요청을 할 필요가 없기 때문입니다.
가져온 글꼴을 사용하려면 미리 로드하여 사이트 성능을 향상시키십시오. Google 글꼴 또는 Typekit에서 글꼴을 사용할 수 있는 경우 글꼴을 가져와서 Next.js의 최적화 기능을 활용할 수 있습니다.