텍스트 관련 CSS - 웹 폰트 사용하기

텍스트 관련 CSS - 웹 폰트 사용하기

• 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식입니다.
• 사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자 컴퓨터에 다운로드한 후 표시하기 때문에 우베 제작자가 의도한 대로 텍스트를 표시할 수 있습니다.
• 웹폰트 제공 서비스로는 무료 오픈소스 글꼴을 제공하는 구글 폰트와 눈누 등이 있습니다.

웹폰트 단점

• 트래픽이 많이 증가합니다. 그나마 영문 웹폰트는 수십 KB 정도의 수준이나 한글 웹폰트는 수백 KB ~ 2천 여 KB 수준으로 용량이 큽니다.. 따라서 해당 폰트를 사용하기 전에 정말 그 폰트가 필요한지 고민해보는 게 좋습니다.
• 저작권 문제가 있기도 합니다. 웹상에 올려서 배포해야만 하는데, 폰트 구입에서 사용권만 얻을뿐, 배포권을 주지 않는 경우가 부지기수이기 때문입니다. 비영리적 사용이라면 인터넷 사용도 허가하는 폰트를 사용하는게 좋습니다.

구글 웹 폰트 사용하기

1. 구글 웹 폰트 바로가기 구글 웹폰트에 접속하면 구글에서 제공하는 여러 웹 폰트가 있습니다.

1. 사용하고자 하는 글꼴을 찾아 클릭합니다.
2. 글꼴의 크기별로 스타일이 보이며 원하는 사이즈를 사진에 보이는 연두색 원을 클릭하여 선택할 수 있습니다.

1. 핑크색 안의 아이콘을 누르면 선택한 정보를 볼 수 있습니다. 펼쳐진 정보에서 핑크색 원안의 Embed를 누르면 필요한 코드가 보입니다. 사진에서 1번 원안에 있는 코드는 복사하여 HTML의 head 안에 넣고 2번 원안의 코드는 글꼴이 필요한 CSS안에 넣으면 됩니다.

직접 웹폰트 업로드해 사용하기

• 자신이 가지고 있는 ttf 폰트를 변환해 사용한다면 직접 업로드해 사용해야 합니다.
• 컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)유형이고 파일 확장자는 ttf입니다. 하지만 트루타입 유형의 글꼴은 파일 크기가 너무 크기 때문에 웹에 적합한 여러 글꼴 유형 중에서 eot(Embedded Open Type) 와 woff(Web Open Font Format) 파일이 가장 많이 사용됩니다.
• 웹 폰트 변환 사이트 중 Transfonter 사이트 바로가기에서 한글폰트까지 변환할 수 있습니다.

참고: HTML5 + CSS3 웹 표준의 정석