<div id="readability-page-1" class="page"><cite>하늘을난모기</cite>
 2021. 12. 20. 09:08
 <div>
 font를 추가하기 위해서는 몇 가지 방법이 있다.
css폴더에서&nbsp;
1. font-face
<pre><code>@font-face {
 font-family: "establishRetrosansOTF";
 src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/establishRetrosansOTF.woff") format('woff');
}</code></pre>
이렇게 추가하고, 원하는 곳에서 font-family: establishRetrosansOTF로 쓰면 된다.
2. import
<pre><code>@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
</code></pre>
import 형식으로도 추가할 수 있다.
font-family: Pretendard로 사용하면 된다.

html폴더에서도 가능하다.
<pre id="code_1639958869629" data-ke-language="html" data-ke-type="codeblock"><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&amp;display=swap" rel="stylesheet"&gt;</code></pre>
이런 형식으로 된 값을 head영역에 추가하면 된다.
<a href="https://fonts.google.com/?subset=korean">https://fonts.google.com/?subset=korean</a>&nbsp;
<figure id="og_1639958905352" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Google Fonts" data-og-description="Making the web more beautiful, fast, and open through great typography" data-og-host="fonts.google.com" data-og-source-url="https://fonts.google.com/?subset=korean" data-og-url="https://fonts.google.com/" data-og-image="https://scrap.kakaocdn.net/dn/GD2i9/hyMKIdzald/1qIqE9CQCKIMKc5oMHtcj1/img.png?width=2400&amp;height=1260&amp;face=0_0_2400_1260"><a href="https://fonts.google.com/?subset=korean" target="_blank" rel="noopener" data-source-url="https://fonts.google.com/?subset=korean">

<div>
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/GD2i9/hyMKIdzald/1qIqE9CQCKIMKc5oMHtcj1/img.png?width=2400&amp;height=1260&amp;face=0_0_2400_1260"></figure>
여기서 원하는 폰트를 찾고 위의 방법들로 시도해보자.

<h4 data-ke-size="size20">유의점</h4>
전체 스타일에 폰트를 적용은 아래와 같이 global-style에서 적용해주면 된다.
<pre><code>* {
 font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}</code></pre>
단, 아직까지 크롬의 버그가 하나 있다.
전체 스타일로 폰트를 적용할 경우&nbsp;
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="990" data-origin-height="154">
 
 <img src="https://k.kakaocdn.net/dn/oHM20/btroptEimIS/b0qFGAUcyGkiO9DPSlLJU0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="990" data-origin-height="154">
 
 
</figure>
(리액트 문제일 지는 좀 더 확인해야 하지만..) 적용이 됐음에도 위처럼 취소선이 그어지며 적용안된 것 처럼 보여진다.
실제로 적용은 된 것이니 걱정하지 않아도 된다.
 
 
 </div></div>

하늘을 난 모기

font를 추가하기 위해서는 몇 가지 방법이 있다.
css폴더에서 
1. font-face
@font-face {
 font-family: "establishRetrosansOTF";
 src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/establishRetrosansOTF.woff") format('woff');
}
이렇게 추가하고, 원하는 곳에서 font-family: establishRetrosansOTF로 쓰면 된다.
2. import
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
import 형식으로도 추가할 수 있다.
font-family: Pretendard로 사용하면 된다.
 
html폴더에서도 가능하다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
이런 형식으로 된 값을 head영역에 추가하면 된다.
https://fonts.google.com/?subset=korean 
여기서 원하는 폰트를 찾고 위의 방법들로 시도해보자.
 
유의점
전체 스타일에 폰트를 적용은 아래와 같이 global-style에서 적용해주면 된다.
* {
 font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
단, 아직까지 크롬의 버그가 하나 있다.
전체 스타일로 폰트를 적용할 경우 
(리액트 문제일 지는 좀 더 확인해야 하지만..) 적용이 됐음에도 위처럼 취소선이 그어지며 적용안된 것 처럼 보여진다.
실제로 적용은 된 것이니 걱정하지 않아도 된다.

font 추가하기

댓글