본문 바로가기
CSS

pretendard 프리텐다드 웹폰트 적용하기

by 영감은어디에 2023. 6. 11.

그동안 한글 웹폰트 사용할때마다 항상 뭔가 부족하고 
자간과 행간의 조정이 필요했었는데.. 
이제 이거만 써도 될 듯. 이거 만드신 분 복받으시길. 

 

다운로드 

https://cactus.tistory.com/306?fbclid=IwAR3KcWXEy7qzM0oykZFgY58eUebI3Qcwnl1SJ2IZQdCLQewxX6S-3auKYsM 

 

1. PC 에서 사용할때

적용된 모습 


 

2. 웹폰트로 사용시 

1. 소스를 복붙한다. 아래 둘중에 하나를 사용한다. 

css에서 사용시 

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

 

또는 html로 사용시 (이 방법이 더 좋다는 말이 있다)

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />

 

2. css에서 적용하기 

font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

 

'CSS' 카테고리의 다른 글

텝 css  (0) 2024.04.25
input checkbox 만들기  (0) 2024.04.25
input checkbox 스위치모양  (0) 2024.04.25
Grid 레이아웃 한방 정리. 고정값 가변값  (0) 2024.04.25
ion icon  (0) 2023.04.28
유튜브 웹페이지 배경으로 넣기  (0) 2023.02.26
VS code에서 Sass .scss 사용하기  (0) 2023.02.13
VS code 단축키 shift+alt+f 로 CSS 한줄로 변환하기  (0) 2023.02.13