@font-face 규칙
@font-face {
font-family: name;
src: local('fontname'), url('path/filename.orf') format('opentype');
}
- local: 해당 이름을 가진 폰트가 컴퓨터에 설치되었는지 확인
- url: 컴퓨터에 없을 경우 서버에서 찾아갈 경로 설정
- format: 폰트 타입 설정
사용할 때는 아래와 같이 폰트 스택에서 해당 폰트 이름만 호출
E { font-family:fontname; }
로컬 폰트를 체크할 때 오류가 나는 경우가 많으므로, null 값을 넣어서 제작자가 의도한 폰트를 강제로 다운로드 시키는 방법을 주로 사용한다.
방탄 문법
따라서 여러 브라우저에서 제대로 사용하려면 아래와 같이 사용한다.
@font-face {
font-family: fontname;
src: url('filename.eot');
src: local('☺︎'),
url('filename.woff') format('woff'),
url('filename.ttf') format('truetype'),
url('filename.svg#filename') format('svg');
}
/* 또는 폰트 스프링 방탄 문법 */
@font-face {
font-family: fontname;
src: url('filename.eot?') format('eot'), //아직 추가 테스트가 필요함
url('filename.woff') format('woff'),
url('filename.ttf') format('truetype'),
url('filename.svg#filename') format('svg');
}
- SVG의 경우 아이폰, 사파리 4.1 이후 지원
- 방탄 @font-face 생성기 : Font Squirrel http://www.fontsquirrel.com/fontface/generator
- 과정 참고 : http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
이탤릭 폰트가 별도로 있는 경우
@font-face {
font-family: "Museo Sans";
src: local('Museo Sans'), url('MuseoSans_500.otf) format('opentype');
}
@font-face {
font-family: "Museo Sans Italic";
src: local('Museo Sans Italic'), url('MuseoSans_500_Italic.otf) format('opentype');
}
h1 {font-family:'Museo Sans', sans-serif;}
h2 em {
font-family:'Museo Sans Italic', sans-serif;
font-style:normal;
}
h2 em 처럼 폰트 자체를 이탤릭으로 지정해놨는데, em의 기본속성인 이탤릭이 중복해서 들어가는 경우엔, 스타일에서 normal로 지정을 해준다. 그렇지 않으면 파이어폭스에서는 이탤릭이 중복으로 적용되어 버린다. (폰트 자체 이탤릭 + 브라우저 인공 이탤릭)
구글 한글 폰트
http://www.google.com/fonts/earlyaccess
Nanum Brush Script (Korean)
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
font-family: 'Nanum Brush Script', cursive;
Nanum Gothic (Korean)
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
font-family: 'Nanum Gothic', sans-serif;
Nanum Gothic Coding (Korean)
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
font-family: 'Nanum Gothic Coding', monospace;
Nanum Myeongjo (Korean)
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
font-family: 'Nanum Myeongjo', serif;
Nanum Pen Script (Korean)
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
font-family: 'Nanum Pen Script', cursive;
스포카 한 산스
https://spoqa.github.io/spoqa-han-sans/ko-KR/
한글은 구글 Noto sans/본고딕과 동일하고, 숫자 부분이 좀 더 구분하기 쉽게 되어 있어서 즐겨쓰는 폰트이다.
하지만 윈도우 OS 상의 브라우저에서는 한글 폰트가 이상하게 깨져 보이는 문제가 있다. 폰트 전문가가 아니라서 이유는 모르겠다.
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
Element { font-family: 'Spoqa Han Sans', 'Nanumgothic', '나눔고딕', 'Sans-serif'; }
최신 댓글