html 글씨체 나눔고딕 웹폰트 적용
■컴퓨터에서 특정 글씨체를 보기 위해서는 컴퓨터에 해당 글씨체 파일이 있어야 하는데요. 예를 들어 홈페이지의 글씨체를 나눔고딕으로 설정해도 사용자의 컴퓨터에 나눔고딕 폰트가 없으면 기본 글꼴이 보여게 됩니다. 그렇다고 사용자들에게 일일이 나눔고딕이라는 글꼴을 다운 받아라고 할 수도 없는 일이잖아요. 이럴 때는 CSS에 웹 폰트를 넣어서 적용하면 되거든요. 이렇게 하면 모든 사람의 컴퓨터에서 지정한 글씨체가 보이게 됩니다. 구글의 웹 폰트 중에서 나눔고딕을 홈페이지 글꼴로 지정하는 과정을 알아볼게요.
예제를 하나 만들어서 글꼴의 변화를 살펴보겠습니다.
■ 단순하게 본문에 텍스트 한 줄 입력하고 웹 브라우저에서 열어봤습니다. 기본 글꼴이 적용돼서 출력되는데요. 이 문장의 글꼴을 구글 웹 폰트 중 '나눔고딕'으로 변경해보겠습니다.
먼저 구글의 웹 폰트 페이지로 이동할게요.
http://www.google.com/fonts/earlyaccess
■ 구글 웹 폰트 중에서[ Nanum Gothic(Korean)]을 찾아보시면 그림처럼 Link가 보이는데요. 이 부분을 그대로 복사해서 CSS에 넣어주고, 글꼴 설정을 font-family : 'Nanum Gothic' 으로 지정해주시면 됩니다. 직접 적용해볼게요.
■ 구글 웹 폰트에서 link 부분을 복사해서 <style>태그 안에 넣었구요. 텍스트의 글꼴을 'Nanum Gothic' 으로 설정했습니다. 웹 브라우저에 보면 아래 그림처럼 나눔고딕이 적용된 걸 확인할 수 있습니다.
■ 제 컴퓨터의 Fonts 폴더에는 "나눔고딕" 글꼴이 들어 있거든요. 확실하게 확인해보기 위해서 Fonts 폴더에서 글꼴을 빼고 적용해본 화면입니다. 혹시 저처럼 테스트해보실 분들은 [C: ▶ Windows ▶ Fonts] 폴더에서 "나눔고딕" 글꼴 빼고 웹 브라우저에서 html 문서 열어서 확인해보시구요. 다른 글꼴도 같은 방법으로 적용해보세요.^^ 수고하셨습니다.
