[CSS] 폰트 적용 방법

• font-family, tailwind는 어떤 폰트를 적용할지 쓰는 것
• font-face, link는 폰트를 어디서 불러올지 쓰는 것

css font-family 사용

body {
  font-family: 'MyFont', sans-serif;
}

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2');
}

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

• 차례로 우선 적용할 폰트, 없으면 적용할 폰트를 적으면 된다.
  가장 간단한 방식임
• os에 이미 존재하는 폰트로 정할 수 있고 외부 폰트를 적용할 수 있다. (예: Arial, sans-serif)
• 외부폰트는 font-face나 link 등이 있는데 그 폰트르 어디서 불러올지 따로 적어야한다.
• font-face는 직접 폰트 파일을 cdn에 올리고 css로 불러오는 방식
  -link 방식은 무료지만 외부 서버에 의존하는 방식이라 서버가 느리면 폰트가 늦게 로딩이 됨