일반적으로 윈도우즈 계열의 컴퓨터에는 4가지의 한글 글꼴이 제공된다. 즉, 굴림, 돋움, 바탕, 궁서 이렇게 4가지가 제공되는 셈이다. 여기서 굴림체와 같이 끝에 체가 붙는 글꼴은 체가 붙지않은 글꼴과 동일한 글꼴이다. 이 둘사이의 차이는 비례공백 폰트(예: 굴림)를 사용하느냐 아니면 고정공백 폰트(예: 굴림체)를 사용하느냐 이다. 그러나 비례공백이나 고정공백은 한글과는 무관하며, 영어 알파벳 처럼 글자별로 공백이 다른 서체에만 해당된다.

따라서 윈도우즈에서 기본적으로 제공되는 글꼴은 앞서 얘기했듯 굴림, 고딕, 바탕, 궁서, 4가지로 보아야 한다. 그러면 @굴림은 무엇일까? 글꼴 이름앞에 @가 붙어있는 글꼴은 세로쓰기용 글꼴이다. 즉, 항상 서있는 글꼴이 불쌍하거나 피곤해 보일때 눕혀서 사용하는 글꼴로 보면된다.

아무튼 윈도우즈에서 제공하는 기본 글꼴은 4가지이다. 이게 무슨 말이냐하면 우리가 웹 페이지에서 사용할 수 있는 글꼴 역시 4가지라는 얘기다. 무슨 말인지 년말이 다가왔는데도 이해가 안가는 사람은 자신의 머리를 한탄하면서 다음 예를 보기바란다.

예를들어 사이트를 디자인하는 디자이너의 컴퓨터에 글꼴이 100개가 있고, 이 100개의 글꼴로 홈페이지를 무지 예쁘게 디자인했다고 치자. 이 페이지를 웹에 올리고 포부도 당당하게 사장님께 보고하면 어떻게될까? 다음날 짤리지않을까? 이 경우 문제는 사장의 컴퓨터에는 디자이너가 사용한 글꼴이 없을 가능성이 아주 높다는 것이다(사장의 연령이 높아질 수록 가능성은 더 커진다). 따라서 디자이너가 사용한 100개의 글꼴은 글꼴 대치 규칙에의해 위의 4개의 글꼴중 어느 하나로 대치되며, 웹 페이지는 디자이너가 디자인한 페이지와는 상당히 다른 페이지가 되게된다.

그렇다고 디자이너 주제에 사장에게 글꼴을 설치하라고 강요할 수도 없는 노릇이다. 이러한 문제를 해결하기위해 일반적으로 사용하는 방법이 이미지이다. 그렇지만 이 방법 역시 그렇게 좋은 방법은 아니다. 기껏만든 이미지 중간에 글자 하나를 더 추가하는 버릇이 사장에게 있다면 더더욱 그렇다.

그러면 어떻게 할까? 가장 좋은 방법은 디자이너가 사용한 폰트를 웹페이지에 접속함과 동시에 다운받게하고, 이 다운받은 폰트로 웹페이지를 출력하는 방법일 것이다. 이처럼 웹에서 바로 다운가능한 폰트가 웹폰트이다. 본 강좌에서는 웹폰트에대한 간단한 정의와 웹폰트를 만드는 방법을 비교적 자세히(?) 설명하겠다. 머리가 아프더라도 꾹 참고 끝까지 읽어주기바란다.