커스텀폰트 적용

HTML CSS 웹폰트 넣는 법과 안티앨리어싱

[개요]

body{
    margin: 0px;
    font-family: 'gulim';
}
--> font-family 속성은 자동으로 inherit 됨

body{
    margin: 0px;
    font-family: 'gulim', 'dotum','arial';
}
--> 굴림이 안되면 돋움, 안되면 arial 적용해라 (안정성을 위한 장치)

[커스텀 폰트 넣는법]
사용자들 pc에 깔려 있지 않는 폰트도 보이게 하는 법

@font-face {
    font-family: '이쁜폰트';
    src: url(../font/NanumSquareR.ttf);
}
--> 내가 준비한 폰트를 CSS에서 사용가능토록 등록하는 과정

body{
    margin: 0px;
    font-family: '이쁜폰트';
}
--> 다음으로 바디에 작명한 폰트 패밀리를 적용시켜 준다.
--> 한글폰트 사이즈는 너무 크므로 1-2개만 사용(용량 줄이려면.woff 사용)

[google fonts 활용 폰트파일 호스팅]

• fonts.google.com --> 트래픽 절약
• HTML에 첨부하고 싶다면 로 시작되는 부분을 복붙
• CSS에 첨부하고 싶다면 @import 로 시작되는 부분을 CSS 맨 위에 복붙

 

[폰트 부드럽게 처리 --> 회전]

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