웹 폰트 사용법

웹 폰트

사용자의 컴퓨터에 설치 여부와 상관없이 온라인으로 다운받아 사용할 수 있는 폰트들이다.

웹 폰트는 font-family 속성을 사용하지만, @font-face 라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드 할 것을 알리면서 사용할 수 있다.

사용법

1. 아래 홈페이지에서 원하는 웹폰트를 다운받고 CSS파일이 있는 폴더에 저장한다.

https://fonts.google.com/?subset=korean

[

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

](https://fonts.google.com/?subset=korean)

나는 왼쪽에 있는 Nanum Pen Script 를 다운받았다.

2. CSS 코드 내에 @font-face 와 font-family 를 추가한다.

@font-face : 지시어는 웹 브라우저에게 서체 이름과 다운받을 위치를 알려준다.

• font-family 속성의 값은 font명으로 지정될 이름인데 사용자가 원하는 이름으로 정하면 된다.
• (@font-face 지시어 내의 font-family)
• src 속성의 값에는 파일의 위치를 나타내는 url값을 지정하거나, 컴퓨터에 설치된 폰트명을 지정하면 된다. format()에는 확장자가 들어가는데 확장자가 ttf일때는 TrueType, otf일때는 OpenType을 쓰고 나머지는 그냥 확장자를 그대로 적으면 된다.
• @font-face{ font-family:'NanumGothic'; src:url('fonts/NanumGothic.woff')format('woff'), url('fonts/NanumGothic.ttf')format('truetype'), url('fonts/NanumGothic.svg')format('svg'); } /*src 속성에 나열하는 파일 목록 마지막에는 세미콜론을 두어 src 속성의 끝임을 표시해야 한다.*/
• font-weigth 는 폰트의 굵기, font-style 은 폰트 스타일이다.

font-family 의 값인 폰트들은 순서대로 적용된다. (footer 셀렉터 내의 font-family)

• 아래 CSS파일의 경우에는 1순위로 'NanumSquare'이 적용되고 NanumSquare'이 없을 시 'MalgunGothic'이 적용된다. 'MalgunGothic'도 없다면 'Verdana'가 적용된다.

  @font-face{
      font-family : NanumSquare;
      src : url(fonts/NanumPenScript-Regular.ttf) format('truetype');
      font-style : normal;
      font-weight : normal;

  }

  footer {
    font-family: "NanumSquare", "MalgunGothic", "Verdana";  
    font-size: 40px;  
  }

 

src 와 format() 사용 예시

@font-face{
font-family:'NanumGothic';
src:url('fonts/NanumGothic.woff')format('woff'),
    url('fonts/NanumGothic.ttf')format('truetype'),
    url('fonts/NanumGothic.svg')format('svg');
}
/*src 속성에 나열하는 파일 목록 마지막에는 세미콜론을 두어 src 속성의 끝임을 표시해야 한다.*/

 

fonts 폴더안에 저장한 웹폰트

3. 웹 폰트가 저장된 주소를 @font-face 내의 src 속성에 올바르게 지정했다면 글꼴이 바뀔것이다.

글씨체가 바뀌었다.