웹 폰트

@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');
}
이탤릭 폰트가 별도로 있는 경우
@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'; }