<CSS 기초> 11. Web Fonts

 

  이번 장은 지난 장에 이어서 텍스트에 관한 내용이다. 지난 장에서 텍스트에 서체를 입히는 방법을 배웠다. font-family를 이용하는 방식이었는데, 이 때 중요한 문제가 있다. 바로 그 웹을 보는 사람이 그 폰트가 없을 수 있다는 것이다. 그래서 web font를 이용해서 온라인 상에서 폰트를 받아서 보여줄 수 있도록 하는 방법을 알아보자.

 

1. 간접적 방법

 먼저 간접적으로 가져오는 방식이다. 이는 예를 위해 구글 폰트사이트에 들어가보자. 원하는 폰트를 클릭하여 select하면 오른쪽 창에 추가된다.

 

 그럼 구글에서 그것을 html문서와 css문서에서 사용할 수 있도록 코드를 제공하는 것을 볼 수 있다.

 

 <link> 형태로 제공되는 것은 html문서의 헤드에 넣고, font-family부분은 css에 넣도록 하자. 여기서 하나의 문서는 폰트가 통일되는 것이 일관성있어 보이므로 편하게 body에 넣는 것을 추천한다.

 

 

2. 직접적 방법

 직접적으로 자신이 자주 쓰는 폰트에 대해서 css문서를 별도로 만들어 꺼내 쓰는 것도 방법이다. fonts.css 와같은 문서를 새로 만들고, 다음과 같이 사용할 수 있다.

 

@font-face {
  font-family: 'myfont';
  font-style:normal;
  font-weight:400;

  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

  먼저 @font-face 를 선언하고 폰트를 넣어준다. 이 때, 폰트명은 자신이 원하는 대로 쓸 수 있다. 그리고 src부분은 각 포맷별로 자신이 가지고 있는 확장자에 대해서만 작성하면 된다. (위의 src 부분은 font face css trick 을 구글링하여 참고하였으며 아래 참고부분에 링크가 있다.)

 

 위를 각 weight 별로 제작하고 html에 스타일 css를 링크함과 더불어 위를 작성한 css도 링크하여준다. 그리고 css에는 @import url(위 css경로); 를 작성하여 불러온다.

 

3. 팁

 텍스트를 작성하다보면 글이 너무 길어져서 가로로 길게 배열되다보니 가독성이 떨어질 때가 있다. 물론 창이 작아지면 자동으로 줄바꿈되니까 상관은 없지만 창이 클 경우에도 어느정도 자동줄바꿈을 하려면 아래와 같이하면된다.

 

  width : 100;

  max-width:768px;

 

 위와 같이 작성하면 768px 까지만 자동 줄바꿈되고 그 이후는 768px에서 고정된 줄바꿈이 유지된다. 즉 반응형 웹을 설계할 수 있다.

 

 

 

 

---

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

Using @font-face | CSS-Tricks