Next.js에서 @next/font를 사용하여 글꼴을 최적화하는 방법

글꼴이 사이트 성능을 저하시키고 있습니까? 이 패키지를 사용하여 애플리케이션의 글꼴 로딩 시간을 최적화하세요.

Next.js 애플리케이션을 시각적으로 더욱 매력적으로 만들기 위해 사용자 정의 글꼴을 사용할 수 있습니다. 사용자 정의 글꼴을 사용하면 웹 사이트의 모양과 느낌을 크게 향상시킬 수 있지만 제대로 최적화되지 않으면 사이트 성능이 저하될 수도 있습니다. 그만큼@다음/글꼴패키지는 이 문제에 대한 해결책입니다.

@next/font 패키지는 Next.js에서 글꼴 로딩을 최적화하는 간단하고 효율적인 방법을 제공하여 페이지 로딩 시간과 전반적인 성능을 향상시킵니다. 이 문서에서는 Next.js 프로젝트에서 @next/font를 사용하는 방법에 대한 정보를 제공합니다.

당신은 설치할 수 있습니다@다음/글꼴터미널에서 다음 명령을 실행하여 패키지를 만드세요.

Yarn을 사용하는 경우 다음 명령을 실행하여 패키지를 설치할 수 있습니다.

그만큼@다음/글꼴 패키지는 Google 글꼴 사용을 최적화합니다. 그만큼@다음/글꼴Next.js 서버에서 Google 글꼴을 자동으로 자체 호스팅하므로 글꼴을 가져오기 위해 Google에 요청이 전송되지 않습니다.

애플리케이션에서 Google 글꼴을 사용하려면 다음에서 글꼴을 함수로 가져옵니다.@다음/글꼴/구글로_app.js파일을페이지예배 규칙서:

위의 코드 블록에서는 다음을 사용하여 가변 글꼴을 만들었습니다.로봇 글꼴 기능. 그만큼하위 집합 속성은 글꼴을 라틴 문자로만 하위 집합합니다. 다른 언어를 사용하는 경우 글꼴을 해당 언어로 하위 집합화할 수 있습니다.

글꼴을 정의할 때 글꼴 스타일과 함께 글꼴 두께를 지정할 수도 있습니다.

배열을 사용하여 여러 글꼴 두께와 글꼴 스타일을 지정합니다.

예를 들어:

다음으로 구성 요소를기본태그를 지정하고 글꼴을 클래스로 전달합니다.기본꼬리표:

위의 코드 블록을 사용하여 애플리케이션을 렌더링하면 전체 애플리케이션에 글꼴이 적용됩니다. 또는 단일 페이지에 글꼴을 적용할 수도 있습니다. 이렇게 하려면 특정 페이지에 글꼴을 추가합니다.

다음과 같습니다:

그만큼@다음/글꼴 패키지는 또한 로컬 글꼴 사용을 최적화합니다. 로컬 글꼴을 최적화하는 기술@다음/글꼴패키지는 Google 글꼴 최적화와 매우 유사하지만 미묘한 차이가 있습니다.

로컬 글꼴을 최적화하려면로컬폰트에서 제공하는 기능@다음/글꼴 패키지. 당신은로컬폰트기능@다음/글꼴/로컬그런 다음 Next.js 애플리케이션에서 글꼴을 사용하기 전에 가변 글꼴을 정의하세요.

다음과 같습니다:

가변 글꼴을 정의합니다.마이폰트사용하여로컬폰트 기능. 그만큼로컬폰트 함수는 객체를 인수로 취합니다. 객체에는 단일 속성이 있습니다.소스, 이는 글꼴 파일의 파일 경로로 설정됩니다.워프2체재"./my-font.woff2".

단일 글꼴 모음에 여러 글꼴 파일을 사용할 수 있습니다. 이렇게 하려면소스속성을 다양한 글꼴의 개체와 해당 속성을 포함하는 배열로 변환합니다.

예를 들어:

사용하려면@다음/글꼴 Tailwind CSS가 포함된 패키지를 사용하려면 CSS 변수를 사용해야 합니다. 이렇게 하려면 Google 또는 로컬 글꼴을 사용하여 글꼴을 정의한 다음 변수 옵션으로 글꼴을 로드하여 CSS 변수 이름을 지정합니다.

예를 들어:

위의 코드 블록에서 글꼴을 생성했습니다.인터,변수를 다음으로 설정합니다.--글꼴 인터 . 그만큼클래스 이름그런 다음 기본 요소의 글꼴 변수가 설정되고글꼴 산 . 그만큼상호변수수업은인터페이지의 글꼴과글꼴 산클래스는 기본 sans-serif 글꼴을 적용합니다.

다음으로 tailwind 구성 파일에 CSS 변수를 추가합니다.