[HTML + CSS] font 설정하기(font-family)

1. 일반적인 폰트 적용

1.1 종류

Generic Font Family : serif, sans-serif, monospace, cursive, fantasy 등

• serif : 획의 일부 끝이 돌출된 형태(삐침). 한글로는 바탕체, 명조체
• sans-serif : sans(없는) + serif(삐침). 영어 서체로는 Arial, Helvetica, 한글서체로는 돋움, 굴림, 맑은 고딕, 나눔 고딕
• monospace : 고정폭 글꼴. a와 i의 너비가 같은 것. 코딩할 때 오와 열을 맞추기 위해서 모노스페이스 글꼴 사용. 타자기가 등장했을 경우 키가 엉키게 되어 나타난 서체입니다. 한글은 보통 폭이 동일하고, 코딩은 주로 영어로 이루어지기  때문에 모노스페이스 글꼴은 주로 영문만 있습니다. ‘Courier New’, ‘Consolas’, ‘Monaco’등이 있습니다. 
• Cursive : 커브가 많이 들어가, 필기체 같은 형태. 제목부분 정도 사용
• Fantasy : 개성 있고, 장식성이 많은 서체

body {

font-family:  “돋움”, dotum, “굴림”, gulim, arial, helvetica, “Times New Roman”, sans-serif;

}

1.2 순서  

• 돋움-> dotum -> 굴림 ->….. ->Times New Roman -> sans-serif

• 앞의 진열된 서체중에 없으면, 저장되어 있는 sans-serif체 사용 

1.3 기재 방법 

•  한글은 따옴표를 붙여 준다 : "돋움", "굴림"
•  한글로 된 서체명을 인식 못할 경우를 대비에 영어 서체명도 기재 : dotum, gulim
•  서체명에 띄어쓰기가 있으면 따옴표. "Times New Roman"
•  serif, sans-serif 등의 Generic Font Family 는 따옴표를 쓰지 않는다.

 

2. 구글폰트

https://fonts.google.com : 구글폰트

3. 컴퓨터에 저장된 폰트 사용