테스트 사이트 - 개발 중인 베타 버전입니다

웹폰트를 다운받아 적용할대 CSS에 쓰는 부분.. 채택완료

Amurtart 10년 전 조회 8,202

일단 웹폰트를 다운 받아 변환하고 서버에 올렸습니다.

 

http://blog.naver.com/naan_ace?Redirect=Log&logNo=220073900577">http://blog.naver.com/naan_ace?Redirect=Log&logNo=220073900577

 

요기를 보고 했습니다.

 

서버에 ttf 라는 폴더에 넣었습니다.

 

그리고 디폴트 CSS를 수정중인데요.;;;

</p><p>@charset "utf-8";
@font-face{</p><p> font-family:"Nanum Gothic";
 src:url('../../ttf/NanumGothic.eot');
 src:url('../../ttf/NanumGothic.eot?#iefix') format('embedded-opentype'),
 url('../../ttf/NanumGothic.woff') format('woff'),
 url('../../ttf/NanumGothic.ttf') format('truetype');
 url('../../ttf/NanumGothic.svg#NanumGothic') format('svg')
 src:local(※), url('../../ttf/NanumGothic.woff') format('woff');​</p><p> </p><p>/* SIR 지운아빠 */</p><p>/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:NanumGothic}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:NanumGothic}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}</p><p>#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family:NanumGothic;font-size:1em}
button {cursor:pointer}​</p><p> </p><p>

 

이렇게 했는데 맞게 한걸까요?

적용이 안되는거 같습니다..ㅠㅠ 

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
10년 전

@font-face{

font-family:"Nanum Gothic";

src:url('/css/fonts/NanumGothic.eot');

src:url('/css/fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),

url('/css/fonts/NanumGothic.woff') format('woff'),

url('/css/fonts/NanumGothic.ttf') format('truetype');

url('/css/fonts/NanumGothic.svg#NanumGothic') format('svg')

src:local(※), url('/css/fonts/NanumGothic.woff') format('woff');

저도 이렇게 사용중이에요 위 처럼 폰트 정의해주고 적용할곳에 

 

#tit_js {

font-family:'Nanum Gothic',sans-serif;

font-size:22px;

font-weight:bold;

color:#4d4d5f;

 

이렇게 사용하시면 됩니다. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

A
Amurtart
10년 전
탈환대님 default.css 에 윗쪽 구문을 첨부하면 사이트 전체에 적용되는거 아녀요? ㅠㅠ

#tit_js {

font-family:'Nanum Gothic',sans-serif;

font-size:22px;

font-weight:bold;

color:#4d4d5f;

}

이 부분은 따로 넣어야 하는건가요? ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

10년 전

위에 사용하신 태그는 폰트를 불러오는 것이고 적용하실려면 

body 든지 해당 id 든지 css 적용을 해주셔야 합니다. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

A
Amurtart
10년 전
탈환대님 감사합니다..^^:;;

댓글을 작성하려면 로그인이 필요합니다.

10년 전

</p><p><span style="font-family: Inconsolata, monospace; font-size: 13.3333330154419px; line-height: normal; background-color: rgb(255, 255, 224);">@import url(<a href="<a href="http://fonts.googleapis.com/earlyaccess/" target="_blank" rel="noopener noreferrer">http://fonts.googleapis.com/earlyaccess/</a>"><a href="http://fonts.googleapis.com/earlyaccess/" target="_blank" rel="noopener noreferrer">http://fonts.googleapis.com/earlyaccess/</a></a></span><b style="font-family: Inconsolata, monospace; font-size: 13.3333330154419px; line-height: normal;">nanumgothic.css</b><span style="font-family: Inconsolata, monospace; font-size: 13.3333330154419px; line-height: normal; background-color: rgb(255, 255, 224);">);</span></p><p><span style="font-size: 10pt; line-height: 1.5;">​body {</span><span style="font-family: Inconsolata, monospace; font-size: 13.3333330154419px; line-height: normal; background-color: rgb(255, 255, 224);">font-family: '</span><b style="font-family: Inconsolata, monospace; font-size: 13.3333330154419px; line-height: normal;">Nanum Gothic</b><span style="font-family: Inconsolata, monospace; font-size: 13.3333330154419px; line-height: normal; background-color: rgb(255, 255, 224);">', serif;</span><span style="font-size: 10pt; line-height: 1.5;">​</span><span style="font-size: 10pt; line-height: 1.5;">}</span></p><p>

 

이렇게 간단하게 사용가능하세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

A
Amurtart
10년 전
음 이걸 최 상단에 올리면 되는 건가요? 밑에는 다 지우구요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인