<div id="readability-page-1" class="page"><div id="main" role="main">
<article>
<h2>나눔바른고딕 경량화 웹폰트 공유</h2>



<div>
<p>요즘 나눔바른고딕을 사용하는 일이 많아져서 웹폰트가 있는지 찾아보니 구글 폰트에서 바른고딕은 없었고 github이나 무료 CDN에 종종 찾을 수 있었지만, 모바일 웹에서 사용하기엔 크나큰 용량이어서 직접 만들어 보았습니다.<br>
실사용되는 한글 및 특수문자 <strong>3,705자</strong>만 추려 용량을 약 <strong>65% 축소</strong>하였습니다.<br>
※ <em>Version 1.000 2013 initial release</em> 버전으로 경량화 하였습니다.</p>

<h2 id="nanumbarungothic">NanumBarunGothic</h2>

<blockquote>
  <p>모바일에 최적화된 정통 고딕 글꼴입니다. 글꼴이 가장 깨끗해 보이는 두께와 자간을 연구해 또렷하게 보이도록 만들었습니다. 돌출 형태나 곡선이 없어 작은 화면에서도 잘 읽힙니다.<br>
<code>https://hangeul.naver.com/2017/nanum</code></p>
</blockquote>

<h3 id="옵션">옵션</h3>

<ul>
  <li>Regular(400), Bold(700), Light(300), Ultra Light(200) 지원됩니다.</li>
  <li><a href="https://en.wikipedia.org/wiki/Embedded_OpenType">EOT</a>, <a href="https://en.wikipedia.org/wiki/TrueType">TTF</a>, <a href="https://en.wikipedia.org/wiki/Web_Open_Font_Format">WOFF</a>, <a href="https://www.w3.org/TR/WOFF2/">WOFF2</a> 형식을 사용합니다.</li>
</ul>

<h3 id="사용방법">사용방법</h3>

<h4 id="link-방식-권장">link 방식 (권장)</h4>

<div><pre><code><span>&lt;link</span> <span>rel=</span><span>"stylesheet"</span> <span>type=</span><span>"text/css"</span> <span>href=</span><span>"https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css"</span><span>&gt;</span>
</code></pre></div>

<h4 id="import-방식">import 방식</h4>

<div><pre><code><span>@import</span> <span>url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css")</span><span>;</span>
</code></pre></div>

<h4 id="적용">적용</h4>

<h5 id="css-예시">css 예시</h5>

<div><pre><code><span>body</span>  <span>{</span> <span>font-family</span><span>:</span> <span>'NanumBarunGothic'</span><span>,</span> <span>sans-serif</span><span>;</span> <span>}</span>
</code></pre></div>

<h3 id="참고-사이트">참고 사이트</h3>

<ul>
  <li><a href="https://spoqa.github.io/2015/10/14/making-spoqa-han-sans.html">스포카 한 산스와 글꼴 경량화</a></li>
  <li><a href="https://www.44bits.io/ko/post/optimization_webfont_with_pyftsubnet">웹폰트 경량화: 폰트툴즈의 pyftsubset을 사용한 폰트 서브셋 만들기</a></li>
  <li><a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a></li>
</ul>

</div>


<ins data-ad-client="ca-pub-8262863496694505" data-ad-slot="2071400230" data-ad-format="auto" data-full-width-responsive="true"></ins>


<p><i></i> Written on October 15, 2018
</p>




</article>

</div></div>

코딩 공부방

요즘 나눔바른고딕을 사용하는 일이 많아져서 웹폰트가 있는지 찾아보니 구글 폰트에서 바른고딕은 없었고 github이나 무료 CDN에 종종 찾을 수 있었지만, 모바일 웹에서 사용하기엔 크나큰 용량이어서 직접 만들어 보았습니다.
3,705자만 추려 용량을 약 65% 축소하였습니다.
Version 1.000 2013 initial release 버전으로 경량화 하였습니다.
NanumBarunGothic
모바일에 최적화된 정통 고딕 글꼴입니다. 글꼴이 가장 깨끗해 보이는 두께와 자간을 연구해 또렷하게 보이도록 만들었습니다. 돌출 형태나 곡선이 없어 작은 화면에서도 잘 읽힙니다.
https://hangeul.naver.com/2017/nanum
옵션
Regular(400), Bold(700), Light(300), Ultra Light(200) 지원됩니다.
EOT, TTF, WOFF, WOFF2 형식을 사용합니다.
사용방법
link 방식 (권장)
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css">
import 방식
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css");
적용
css 예시
body  { font-family: 'NanumBarunGothic', sans-serif; }
참고 사이트
스포카 한 산스와 글꼴 경량화
웹폰트 경량화: 폰트툴즈의 pyftsubset을 사용한 폰트 서브셋 만들기
Webfont Generator

나눔바른고딕 경량화 웹폰트 공유

댓글