폰트 변경 방법 채택완료
나눔바른고딕으로 폰트를 변경하려고, css/fonts에 폰트파일 업로드하고, css/default.css를 수정했는데 폰트가 안 바뀌네요. 어디가 문제일까요.
@charset "utf-8";
/* SIR 지운아빠 */
CSS
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 200;
src: url('/css/fonts/NanumBarunGothicUltraLight.eot');
src: url('/css/fonts/NanumBarunGothicUltraLight.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/NanumBarunGothicUltraLight.woff2') format('woff2'),
url('/css/fonts/NanumBarunGothicUltraLight.woff') format('woff');
}
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 300;
src: url('/css/fonts/NanumBarunGothicLight.eot');
src: url('/css/fonts/NanumBarunGothicLight.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/NanumBarunGothicLight.woff2') format('woff2'),
url('/css/fonts/NanumBarunGothicLight.woff') format('woff');
}
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 400;
src: url('/css/fonts/NanumBarunGothic.eot');
src: url('/css/fonts/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/NanumBarunGothic.woff2') format('woff2'),
url('/css/fonts/NanumBarunGothic.woff') format('woff');
}
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 700;
src: url('/css/fonts/NanumBarunGothicBold.eot');
src: url('/css/fonts/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/NanumBarunGothicBold.woff2') format('woff2'),
url('/css/fonts/NanumBarunGothicBold.woff') format('woff');
}
/* 초기화 */
html {}
body {margin:0;padding:0;font-size:0.75em;font-family:Nanum Barun Gothic,dotum}
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:Nanum Barun Gothic,dotum}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#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:Nanum Barun Gothic,dotum;font-size:1em}
button {cursor:pointer}
textarea, select {font-family:Nanum Barun Gothic,dotum;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none}
a:hover, a:focus, a:active {color:crimson;text-decoration:none}
답변 7개
안녕하세요.
css/fonts에 폰트 파일들이 위치한 상태에서 css/default.css를 수정했다고 하셨는데
위의 코드는 default.css가 되겠군요.
default.css는 css디렉토리 안에 들어있고 (css/default.css)
불러오시려는 폰트들은 css/fonts 디렉토리 안에 들어있으니 (css/fonts/Nanum~~.eot)
상대경로를 잡으시려면 해당 default.css파일을 기준으로 잡아야합니다.
즉 부모 디렉토리(css)로 이동한 다음에 부모 디렉토리(css)의 자식 디렉토리(fonts)로 접근해야 합니다.
기준 css/default.css
1. url('../'); = 기준의 부모 디렉토리로 이동(현재 css폴더로 이동된 상태)
2. url('../fonts'); = 기준의 부모 디렉토리로 이동한 후 부모 디렉토리의 자식 fonts로 이동(css/fonts/)
3. url('../fonts/NanumBarunGothicUltraLight.eot'); = fonts 폴더의 나눔바른고딕울트라라이트 폰트로
경로 설정
위 코드의 url부분들을 url('../fonts/NanumBarunGothicUltraLight.eot'); 이런식으로
경로를 변경시킨 다음 다시 한번 시도해보세요^^
답변에 대한 댓글 2개
-> {font-family: 'Nanum Barun Gothic' ,dotum;font-size:1em}
초기화부분쪽에서 폰트패밀리에 이런식으로 따옴표도 추가해보시겠어요?
경로는 맞는거 같아요.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
@charset "utf-8";
/* SIR 지운아빠 */
/* CSS */
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 200;
src: url('../fonts/NanumBarunGothicUltraLight.eot');
src: url('../fonts/NanumBarunGothicUltraLight.eot?#iefix') format('embedded-opentype'),
url('../fonts/NanumBarunGothicUltraLight.woff2') format('woff2'),
url('../fonts/NanumBarunGothicUltraLight.woff') format('woff');
}
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 300;
src: url('../fonts/NanumBarunGothicLight.eot');
src: url('../fonts/NanumBarunGothicLight.eot?#iefix') format('embedded-opentype'),
url('../fonts/NanumBarunGothicLight.woff2') format('woff2'),
url('../fonts/NanumBarunGothicLight.woff') format('woff');
}
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 400;
src: url('../fonts/NanumBarunGothic.eot');
src: url('../fonts/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
url('../fonts/NanumBarunGothic.woff2') format('woff2'),
url('../fonts/NanumBarunGothic.woff') format('woff');
}
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 700;
src: url('../fonts/NanumBarunGothicBold.eot');
src: url('../fonts/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype'),
url('../fonts/NanumBarunGothicBold.woff2') format('woff2'),
url('../fonts/NanumBarunGothicBold.woff') format('woff');
}
/* 초기화 */
html {}
body {margin:0;padding:0;font-size:0.75em;font-family:'Nanum Barun Gothic',dotum}
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:'Nanum Barun Gothic',dotum}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#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:'Nanum Barun Gothic',dotum;font-size:1em}
button {cursor:pointer}
textarea, select {font-family:'Nanum Barun Gothic',dotum;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none}
a:hover, a:focus, a:active {color:crimson;text-decoration:none}
이렇게 해도 안 되네요. 캐시 삭제도 해봤구요. 그냥 포기해야 할것 같습니다. 답변 주신 분들 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
그리고 위의 코드에서
@charset "utf-8";
/* SIR 지운아빠 */
CSS
에서 CSS가 주석처리 안되있는거 같은데 이것도 한번 확인해보세요~~
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 200;
src: url('../fonts/NanumBarunGothicUltraLight.eot');
src: url('../fonts/NanumBarunGothicUltraLight.eot?#iefix') format('embedded-opentype'),
url('../fonts/NanumBarunGothicUltraLight.woff2') format('woff2'),
url('../fonts/NanumBarunGothicUltraLight.woff') format('woff');
답변 감사합니다. 이렇게 변경했는데 폰트가 아무런 변화가 없네요.