[css]font-family 글꼴을 변경하기

CSS / FONT 

 

글자를 변경하는 여러가지 방법들

• font-family : 글꼴을 변경한다.
• font-size : 글자 크기를 변경한다.
• font-style : 글자 스타일을 변경한다(normal,italic, ..)
• font-weight : 글자 굵기 조절(100~900, bold,bolder .. )

---

 

font - family (글꼴 변경하기)

• 원하는 글꼴을 선택할 수 있다.
• 기본적으로 사용자의 컴퓨터에 설치되지 않은 글꼴은 사용 할 수 없다.
• 사용자의 컴퓨터에 해당 글꼴이 로드되지 않는 경우에 대비하여
  여러 예비용 글꼴을 설정해놓을 수 있다.
• 사용자에게 번거롭게 글꼴을 설치하게 하는 것 보다는 CDN을 많이 활용한다.
  (Content Delivery Network   > 로컬PC에있는 자원을 사용하지 않고 외부 자원을 사용)

---

 

CDN을 이용해 Google Font 사용하기

 

https://fonts.google.com/

Google Fonts

1. 사이트 접속

2. 원하는 언어 선택

3. 원하는 글꼴 선택 

4. Select this style 선택

 4-1. import로 변경후 css파일 혹은 html의 <style> 내에 복붙
 4-2. 원하는 요소에 font-family: ~ 부분 복사

@import url('https://fonts.googleapis.com/css2?family=Song+Myung&display=swap');

#div1{
  font-family: 'Song Myung', serif;
}

---

 

Google Font 여러가지 한번에 import 하기

1. 원하는 글꼴에 들어가서 + Select this style 클릭

2. 맨 위에 오른쪽 아이콘을 눌러보면 장바구니처럼 여러개의 글꼴을을 한번에 import 할 수 있는  url이 추가 되어 있고, 글꼴도 추가되어 있는것을 확인할 수 있다.
삭제하고 싶으면  - Remove this style을 누르면 된다.