[tailwindcss]폰트 클래스 삽입
2020. 5. 2
참고사이트
2020.05.25 수정
방법
먼저 사용할 웹폰트를 정하고
페이지 상단에 폰드를 다운받고
tailwindcss.css에 폰트 클래스 삽입
페이지에서 확인
예) noto sans kr 폰트를 사용한다면
구글 폰트에서 사용할 폰트 다운받기(css 링크)
<head>
...
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans+KR:500&display=swap&subset=korean">
...
resources/css/tailwindcss.css 파일에 추가 폰트 삽입
-
여기서 주의할 점은 저기 base 아래에 넣어야 한는듯 싶다. 그 외 자리에 넣으면 어떻게 되는지 모르겠다.
@tailwind base;
.font-sans-kr {
font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
@tailwind components;
@tailwind utilities;
터미널에서 npm run dev 명령어를 통해 public/common/css 디렉토리로 내보내기
npm run dev
DONE Compiled successfully in 9976ms 11:10:40 AM
Asset Size Chunks Chunk Names
public/common/css/tailwindcss.css 1.04 MiB mix [emitted] mix
페이지에서 정상적으로 적용되는지 사용해보기
그냥 아무 텍스트
<div class="font-snas-kr">
지정한 noto sans kr 폰트로 나온다.
</div>
'TIL' 카테고리의 다른 글
| 호이스팅(Hoisting) (0) | 2020.03.27 |
|---|---|
| 객체 순회/배열 순회 (0) | 2020.03.27 |
| 자바스크립트 예약어 (0) | 2020.03.27 |
| mongodb - projection (0) | 2020.03.20 |
| [TIL]2020.03.06 (0) | 2020.03.06 |