웹폰트 적용/나눔고딕/html 폰트 적용하는 법/

아래가 나눔고딕 폰트랍니다.↓↓

 

 

- 나눔고딕을 넣고싶은 class에 css를 아래처럼 폰트를 나눔고딕으로 설정합니다.

  .클래스이름{font-family:'나눔고딕',NanumGothic,'돋움',Dotum,AppleGothic,sans-serif} 

--> 내 컴퓨터에 나눔고딕 폰트가 깔려있으면 나눔고딕으로 보이지만, 내 컴퓨터에 없으면 돋음체로 보입니다. 

 

 

 그럼 어떻게  모든컴퓨터에서 웹문서를 열면 나눔고딕으로 볼 수 있나요?

1. 파일첨부한 나눔고딕폰트 "font"폴더를 업로드.

2. 나눔고딕을 불러오는 css를 넣어주면 됩니다.

------

 

/* Font-Face(폰트불러옴) */
@font-face{
 font-family: "NanumGothic";
 src: url("/font/NanumGothic.eot"); /* IE9 Compat Modes */   
 src: url("/font/NanumGothic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */       
 url("/font/NanumGothic.woff") format("woff"), /* Modern Browsers */       
 url("/font/NanumGothic.ttf")  format("truetype"), /* Safari, Android, iOS */       
 url("/font/NanumGothic.svg#svgMothnnaFont") format("svg"); /* Legacy iOS */
}
/* Font Setting */
.class{font-family:NanumGothic,’나눔고딕’,ng,sans-serif} /* 폰트적용될 class */

 

 

-----

 

 

그럼 나눔고딕 웹에서 적용 끝!

아래처럼 목록이나 설명글로 적용해서 사용 할 수도 있어요~

 

 

 

 

------ html

 

<div class="nanum">
<dl>
    <dt>1. 제목</dt>
    <dd>가나다라마바사</dd>
</dl> 

<dl>
    <dt>2. 제목</dt>
    <dd>가나다라마바사</dd>
</dl>

<dl>
    <dt>3. 제목</dt>
    <dd>가나다라마바사</dd>
</dl>

<dl>
    <dt>4. 제목</dt>
    <dd>가나다라마바사</dd>
</dl>

<dl>
    <dt>5. 제목</dt>
    <dd>가나다라마바사</dd>
</dl>
</div>

 

------ css

.nanum{font-size:13px;line-height:22px;font-family:'나눔고딕',NanumGothic,'돋움',Dotum,AppleGothic,sans-serif

          /* 폰트크기 13픽셀, 줄간격 22픽셀, 폰트 나눔고딕(나눔고딕없을땐 뒤에잇는 돋음) */
.nanum dl{margin:5px 0 20px 0} /* 여백:위,오른쪽,아래,왼쪽 */
.nanum dt{font-weight:600; margin-right:10px; color:#4c4c4c;} /*폰트굵기 600, 여백오른쪽 10픽셀, 폰트컬러 #4c4c4c */
.nanum dd{color:#808080;} /* 폰트컬러 #808080 */

 

[출처] 웹폰트 적용/나눔고딕/html 폰트 적용하는 법/|작성자 수다인