🚀   새로운 블로그로 이전했습니다.

(CSS) font-face 적용

snippet: css
2022.12.06
1분

stitches에서 font-face를 적용하려하는데 계속 실패를했다...

시키는 대로 했는데 말이다 🥲

webpack 관련 문제일까... 결국 css파일로 문제를 해결했다!

webpack에서 말하는 폰트를 가져오는 법

module: {
  rules: [
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
		{
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
    },
  ],
},

css

@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans KR'), url('../assets/fonts/NotoSansKR-Regular.otf');
}

local

로컬 컴퓨터에서 해당 폰트가 있으면 그것을 사용

url

링크할 url 경로

폰트의 weight을 적용시키는 법


@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans KR'), url('../assets/fonts/NotoSansKR-Regular.otf');
  font-weight: 400;
}

@font-face {
  font-family: 'Noto Sans KR';
  src: url('../assets/fonts/NotoSansKR-Medium.otf');
  font-weight: 500;
}

@font-face {
  font-family: 'Noto Sans KR';
  src: url('../assets/fonts/NotoSansKR-Bold.otf');
  font-weight: 700;
}

글씨 폰트를 하나의 font-family에 묶을 수 있다.


참고 자료