next/font 적용

next/font는 아래 두가지로 크게 나뉜다.

@next/font/google
@next/font/local

import React from "react";
import { Noto_Sans_KR } from "@next/font/google";
const bold = Noto_Sans_KR({
  weight: "700",
  display: "fallback",
  subsets: ["korean"],
  style: "normal",
  variable: "--noto-sans_KR-bold",
  fallback: ["system-ui"],
});
const medium = Noto_Sans_KR({
  weight: "500",
  display: "fallback",
  subsets: ["korean"],
  style: "normal",
  variable: "--noto-sans_KR-medium",
  fallback: ["system-ui"],
});
export {
  bold as notoSansKrBold,
  medium as notoSansKrMedium,
}

import React from "react";
import { Roboto } from "@next/font/google";
const bold = Roboto({
  weight: "700",
  display: "fallback",
  subsets: ["latin"],
  style: "normal",
  variable: "--roboto-bold",
  fallback: ["system-ui"],
});
const medium = Roboto({
  weight: "500",
  display: "fallback",
  subsets: ["latin"],
  style: "normal",
  variable: "--roboto-medium",
  fallback: ["system-ui"],
});
export {
  bold as robotoBold,
  medium as robotoMedium,
}

weight: 폰트의 가중치를 설정하는 key
display: css에서 font-display 키워드를 설정 하는 key
subsets: font가 적용할 수 있는 언어 중에서 먼저 가져 올 나라의 언어를 설정하는 key
style: font의 스타일이 normal인지 italic인지 설정하는 key
variable: CSS 변수 방식으로 사용할 때의 이름을 정의하는 key
fallback: 해당 font를 가져오지 못하였을 때의 대체 글꼴을 설정하는 key

방법으로 설정할 수 있다.

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--inter-font',
})


//css파일

.text {
  font-family: var(--inter-font);
  font-weight: 200;
  font-style: italic;
}

CSS 변수 방식 으로 스타일을 적용한 경우 사용할 CSS 변수 이름을 정의하는 문자열 값

variable: '--my-font': CSS 변수가 --my-font선언됨

위와같이 css에서 variable로 선언한 값을 가져올 수 있다.

cx를 사용하였다. classnames라는 패키지를 다운받아서 tailwindCSS와 같이 사용하였다.

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

true 값일때만 값이 전해진다.
classname에서 쓸 경우에는 cx를 선언한뒤 소괄호를 사용해서 인자로 넘겨주면 된다.

전

후