tailwindcss 폰트적용

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet" />

위처럼 기준 html에 태그를넣거나,

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');


@font-face {
  font-family: "SKT";
  src: url("./assets/fonts/SKT-FONT.ttf");
}

위처럼 기준css에 url로 로드하던지 local에서 끌어오던지 로드후

//tailwind.config.js
extend: {
  fontFamily: {
    sans: ["Poppins", "Arial", "sans-serif"], 
    // sans가 제일 기본 상속 폰트이므로 전체 폰트바꾸려면 sans재지정후 맨앞에 원하는 폰트 넣기
  
    hi: ["SKT", "sans-serif"],
  },
},

역할은 두가지인데
1. sans를 재지정해서 전체 폰트물갈이
2. 커스텀 지정자로 폰트 사용하기

hi라는 이름으로 로컬에서받은 skt폰트를 사용하기로 선언했으므로

  <p class="font-sans hover:font-hi">hoho</p>

위 글자는 평소에는 Poppins다가 hover시에 skt폰트로 바뀌게된다