Front-end/etc
프리텐다드(Pretendard) 폰트 적용하기
개발중인제이
2024. 3. 5. 23:06
📍
Pretendard
Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는
cactus.tistory.com
내가 가장 많이 사용하는 폰트 중 하나인 프리텐다드! NotoSans와 같이 가장 많이 사용하는 폰트이다.
웹사이트에 적용하기에 가장 깔끔하고 가독성 좋은 폰트인 것 같다.
1. 웹폰트 cdn 사용하기
- HTML / CSS 둘 중 하나 선택해서 사용하면 된다.
HTML
- html 파일 <head> 태그안에 적용해주면 된다.
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />CSS
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
2. CSS에서 사용하기
#root {
font-family:
"Pretendard",
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
}
🚨 오늘의 삽질
제일 쉽다고 생각했던 폰트 적용에서 꽤나 삽질을 했다.
cdn을 사용해서 적용했는데 폰트적용이 안되는거다. html, body 어디든 font family 속성을 적용했는데 왜 안되는지 도저히 이유를 모르겠던 와중에 간단하게 root에 적용해주는 걸로 해결했다. ㅎㅎ 다시는 이런 시간낭비를 하지 않기를 바라며..🥲