구글 웹 폰트 빠르게 불러오는 방법

블로그/블로그운영

우리가 어느 웹사이트를 방문할 때, 스타일이 정의되지 않거나 다른 기본 폰트가 로드된 다음에 번쩍거리며 구글 웹 폰트로 대치되는 경우를 가끔 볼 수 있습니다. 이것은 초기 단 몇 초 동안이지만 웹사이트의 디자인을 망치고 방문자의 눈살을 찌푸리게 합니다. 그러므로 구글 폰트를 빠르고 올바른 방법으로 로드해야 합니다.

구글 웹 폰트 빠르게 불러오는 방법

구글 폰트를 먼저 로드시켜라

HTML 편집에서 <head> 태그 후 가장 먼저 로드되도록 CSS 파일 전에 구글 웹 폰트 가져오기 코드를 배치합니다. 이렇게 하면 구글 웹 폰트가 CSS 파일보다 먼저 로드하게 됩니다. 그 뒤를 CSS 파일이 따르게 되므로 CSS 파일에서 글꼴 태그를 취향에 따라 원하는 대로 디자인할 수 있습니다.

<html>
  <head>
    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans'>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div>Google Fonts</div>
  </body>
</html>

구글은 웹 폰트를 로드하는 방법으로 참조 링크, 임포트, 자바스크립트의 3가지 방법을 제공합니다.

① 참조 링크를 이용하면 HTML의 상단에 코드를 넣을 수 있으며, CSS 파일보다 더 빠르게 로드할 수 있습니다.

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

② @import 코드는 CSS 파일에 삽입해야 합니다. CSS 파일의 상단에 추가할 수 있지만, 스타일이 적용되지 않은 텍스트가 번쩍거릴 수 있습니다 - 이것은 방문자에게 안 좋은 인상을 남깁니다.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

③ 자바스크립트를 HTML 문서의 <head> 태그의 첫 번째 요소로 코드를 복사합니다.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

적은 폰트를 사용하라

제목을 위한 굵은 형식의 폰트와 문서를 위한 가독성이 높은 폰트 - 최대 2개의 폰트를 선정하는 것이 좋습니다. 폰트를 많이 선정할수록 로딩 시간이 길어지므로 사이트가 버벅거릴 수 있습니다.

폰트 코드를 결합해라

단 한 줄의 코드로 여러 구글 웹 폰트를 로드할 수 있습니다. 로드하려는 폰트마다 한 줄씩 코드를 넣을 필요가 없습니다. Open Sans와 Oswald 두 폰트를 결합하는 방법은 아래와 같습니다.

<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>

기본 스타일로 로드하라

구글의 웹 폰트 옵션을 사용하면 한 폰트의 다양한 스타일을 로드할 수 있습니다. 다양한 스타일의 글꼴을 선택해 로드하는 것은 여러 폰트를 로드하는 것과 같습니다. 각 폰트의 기본 스타일을 선택하면 단 하나의 글꼴로 로드됩니다.

아래의 예를 보면 - Open Sans 폰트를 기본 옵션으로 로드하면 15 로딩 타임이 소요됩니다. 여기에 5개 스타일의 글꼴을 더 선택하고 로드하면 기본 옵션의 6배인 90 로드 타임으로 증가하게 됩니다. 따라서 빠른 웹사이트를 원한다면 꼭 필요한 폰트만 로드하십시오.

구글 웹 폰트 빠르게 로드하는 방법

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

구글 웹 폰트 페이지 로드 타임

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>

더 빠른 폰트를 선택하라

구글 폰트 페이지는 각 폰트의 로드 타임을 아주 명확히 합니다. 폰트 옆의 측정기는 각 폰트가 얼마나 빨리 로드되는지 보여줍니다. 폰트를 더 많이 선택할수록 로드되는 시간은 더 길어집니다. 몇몇 폰트는 무거워서 로드 타임이 거의 두 배가 됩니다. 그러므로 빠르게 로딩되는 폰트를 현명하게 선택해야 합니다. 예로, Open Sans는 15 로드 타임이지만 Droid Sans는 25 이상입니다!

웹 폰트 로더를 사용하라

단순히 CSS가 로드되기 전에 구글 폰트가 로드되길 원하고, 스타일 되지 않은 텍스트가 번쩍거리지 않게 하려면, 웹 폰트 로더를 사용하세요. 웹 폰트 로더는 사이트의 나머지가 로드되기 전에 로드하고, 스타일 되지 않은 텍스트가 번쩍 되는 것을 확실하게 막아줍니다. 비동기 스크립트도 사용할 수 있지만, 폰트가 먼저 로드되는 것을 확실하게 하려면 동기스크립트를 사용하는 것이 좋습니다.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Open Sans', 'Oswald']
    }
  });
</script>

지금까지 '구글 웹 폰트 빠르게 불러오는 방법'에 대하여 살펴보았는데 여러분에게 유용한 정보가 되었는지 모르겠습니다. 이번 시간을 통해 여러분의 블로그나 웹사이트를 다시 한 번 점검해 보시고 잘못된 부분을 수정하셔서 좋은 인상을 남기는 멋진 사이트가 되시길 바랍니다!

신고
+ 댓글은 큰 힘이 됩니다. 2