📍
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에 적용해주는 걸로 해결했다. ㅎㅎ 다시는 이런 시간낭비를 하지 않기를 바라며..🥲
'Front-end > etc' 카테고리의 다른 글
| 포스트맨(Postman)으로 API 테스트 하기 (0) | 2024.03.16 |
|---|---|
| 유튜브(Youtube) API - Key 발급받기, 사용하기 (0) | 2024.03.14 |
| JWT를 이용해서 인증하기 (0) | 2024.01.12 |
| 프로젝트 vercel로 배포하기 (환경변수 에러 해결하기) (1) | 2024.01.10 |
| .env 파일로 환경 변수 설정하기 (0) | 2024.01.09 |
