CSS] 폰트 종류, 구글 폰트 연결하기

폰트 

자주 쓰는 폰트

1. Serif: 끝에 장식이 들어간 형태이고

2. Sans-serif: 끝 장식이 없는 형태이다 

3. monospace: 각 알파벳마다 같은 가로 길이를 가지고 있다.

4. Cursive: 손글씨 느낌

5. Fantasy 

https://www.w3schools.com/css/css_font.asp 

 

Web safe fonts

모든 브라우저와 디바이스에 설치되어 있는 폰트

 

fallback fonts, font family

내가 설정한 폰트가 디바이스에 없으면 그 다음에 적은 폰트를 찾으라고 설정해 놓다. 

css에서 font family를 이용하여 우선 순위 대로 나열한다.

Tahoma 폰트가 1순위이고 이 폰트가 없으면 Verdana가 2순위 이 것도 없으면 sans-serif 사용.

 

 

각 기기에 설치되어 있는 폰트 

Arial인 경우  Win 99.84%  Mac 98.74% 설치 되어있다.

폰트 옆 문서 버튼 누르면 복사가 된다.

복사하면 폰트 패밀리로 복사되어 css에서 붙여넣기한다. 

하지만 기기에 폰트가 설지 되어 있지 않으면 해당 폰트는 보이지 않는다.  

그런 경우로 구글 폰트를 연결해서 사용하는 방법이 있다. 

https://www.cssfontstack.com/

---

 

구글 폰트 연결하기 

기기와 상관없이 내가 설정한 폰트를 보이게 하려면 구글 폰트를 연결하여 준다. 

https://fonts.google.com/?preview.size=35

상업적으로 써도 무료라고 한다.

 

 

html

css

 

구글 폰트 연결시 주의 할 점 

부트스트랩이나 다른 css 스타일시트가 여러 개일 경우

head에서 맨 마지막에 링크 되어 있는 것으로 연결이 되므로

폰트 적용할 css가 다른 링크보다 아래 오는지 확인해야 한다. 

 

 

구글 폰트 두께 조절 

링크된 해당 weight만 가능

html head 링크

css