[ HTML/CSS ] 폰트

1. 폰트 추가 방법

@font-face {
  font-family: 'my-font';
  src: url("../assets/NanumSquareB.ttf")
}

body {
  font-family: 'my-font';
}

2. woff가 ttf보다 용량을 적음.
    웹에서 용량 줄이려면 .woff 쓰셈. ttf의 1/3 수준.

3. 폰트 굵기는 font-wieght 대신 굵은 폰트파일을 다운로드 받아서 사용하는 게 이쁨.

4. 구글이 제공하는 폰트 호스팅 사이트 -> google fonts
    내 웹사이트가 폰트를 가져다 주지 않고 그냥 구글에서 호스팅해주는 폰트를 가져다 쓸 수 있음

5. 폰트 부드럽게 처리하려면 회전 시키는 것도 한 방법임

p, h4,h3,h2,h1, span {
	transform: rotate(0.03deg)
}

    맥은 알아서 부드럽게 처리해주지만 윈도우에서는 위 방식으로 효과를 좀 볼 수 있음

 

6. FontAwesome
    아이콘 가져다 쓸 수 있는 라이브러리
    유료/무료 버전 모두 있음