Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

그냥 그래

CSS 웹 폰트 적용시키기 본문

Web/CSS3

CSS 웹 폰트 적용시키기

그냥사람임 2017. 8. 12. 15:51

안녕하세요 도롱군입니다.

 

보통 웹페이지 작업을 할 때 따로 웹 폰트 혹은 홈페이지 내부에 임베디드 하지 않은 상태라면

사용자들은 기본적으로 디바이스에 저장되어있는 Default font 정보를 이용하여 웹 데이터 리드를 하게 되는데요.

타이포그래피를 도롱군은 꽤나 중요한 요소로 생각하기에 그런 사소한 부분까지 일일히 신경 써주는 스타일 입니다.

 

오늘은 웹 폰트를 적용 시켰을 때, 장점과 단점을 서술하고 웹 폰트를 이용하여 내부 CSS 시트에 어떻게 불러들일 수 있을지에 대하여

포스팅 해보도록 하겠습니다.

 

 

 

 

웹 폰트는 웹 폰트 정보를 제공하는 사이트에서 폰트 스타일을 간단하게 코드 몇 줄로 불러올 수 있습니다.

대표적으로 무료 라이선스인 나눔고딕과 Google에서 제공하는 Google Fonts가 있습니다.

 

1. 네이버 나눔고딕 (http://hangeul.naver.com/2016/nanum)

2. 구글 폰트 (http://fonts.google.com)

 

도롱군의 경우에는 따로 산돌이라는 폰트 라이선스 회사에서 유료로 구입하여 사용하고 있습니다만,

유료 폰트를 사용하지 않을때엔 국문은 나눔고딕 혹은 나눔바른고딕을 사용합니다.

물론 영문은 Google Font를 불러와 사용하기도 합니다.

 

 

 

         장점

 

 

  1. 컴퓨터에 웹 폰트가 설치되어 있지 않아도 그대로 웹에서 불러온 폰트 정보를 이용하게 된다.
  2. 유지보수가 쉬워지며, 코드 한 줄이면 적용이 가능하기에 웹 접근성이 높아진다.

 

 

 

 

         장점

 

 

  1. 웹 폰트를 이용하게 되면 @import 혹은 link 태그로 불러 들여오는 모든 폰트 정보를 다운로드 하기에 속도가 하락한다.
  2. 지원하지 않는 언어 또한 존재하기에 해당 부분도 신경 써주어야 한다.

 

 

 

 

 

 

위의 사진은 Google font 사이트에서 제공하는 800가지의 폰트를 사용할 수 있는 사이트입니다.

저는 오늘 Roboto라는 폰트를 이용해보도록 하겠습니다.

 

평소 고딕한 스타일을 좋아하는 저는 글씨 자간을 주었을 때 이질감 없는 폰트를 좋아합니다.

 

 

 

원하는 폰트를 발견하였으면 현재 "-" 모양이 되어 있지만 원래는 "+" 모양이 되어있습니다.

제가 선택을 해놓았기 때문에 저렇게 나오게 됩니다.

 

해당 부분 "+" 아이콘을 클릭하게 되면 우측 하단에 'Family Selected'라는 문구와 검은색 Bar하나가 나타나게 됩니다.

 

 

 

 

검은색 Bar를 클릭해주시게 되면 아래의 사진과 같이 열리게 되는데, 두 가지로 나뉘게 됩니다.

 

 

 

1번과 2번을 체크를 해두었는데요, 1번과 2번의 항목이 다른 점은 HTML과 CSS 문서 각각에서 불러올 수 있다는 차이점이 있습니다.

@IMPORT의 경우 @import 태그를 이용하여 웹 폰트를 불러오게 되며, 주로 외부 스타일 시트에서 폰트 정보를 쉽게 수정할 수 있다는 점

유지보수가 더욱 간편해지기에 @import를 이용합니다.

 

STANDARD에 들어가는 <link> 태그를 이용한 방법은 <head>의 최상위에 들어가게 되기에, 웹 문서를 불러들일 때, 가장 빠르게 다운로드 받아서 노출시킬 수 있다는 용이점이 있습니다.

 

그럼 이제 Google font에서 불러들일 웹 폰트를 직접 적용해봅시다.

 

 

 CDN 링크 방식 (STANDARD)

 

 <link href=https://fonts.googleapis.com/css?family=Roboto rel="stylesheet">

 

 

 

 @import URL 방식 (@IMPORT)

 

 <style>

     @import url('https://fonts.googleapis.com/css?family=Roboto');

 </style>

 

 

 

  폰트 적용(CSS)

 

 body {

     font-family: 'Roboto', sans-serif;

 }

 

 

 

@import url을 이용하여 외부 CSS 스타일 시트를 불러오던, CDN 링크 방식을 이용하던

웹 폰트 정보를 불러들여 다운로드 받을 수 있다면 바로 font-family로 다운로드가 가능합니다.

 

다만 각 폰트별로 정보가 다르고 자간, 굵기도 다르기에 따로 가이드라인을 준수해야 폰트를 이질감 없이 이용할 수 있습니다.

 

다음 포스팅은 CSS 기본 속성을 알아보도록 하겠습니다.

 

 

저작자표시 비영리 변경금지

'Web > CSS3' 카테고리의 다른 글

CSS 기초부터 활용하기 3편 (색상 편)  (0) 2017.08.24
CSS3 그라디언트 배경화면 만들기  (0) 2017.08.20
CSS 기초부터 활용하기 2편 (스타일 시트 편)  (0) 2017.08.15
CSS 기초부터 활용까지 1편  (0) 2017.08.14
CSS를 이용한 Loader 만들기  (0) 2017.08.11
공유하기 링크
'Web/CSS3' Related Articles more
Comments