폰트 변경 방법
본문
나눔바른고딕으로 폰트를 변경하려고, 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'); 이런식으로
경로를 변경시킨 다음 다시 한번 시도해보세요^^
@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-family:Nanum Barun Gothic,dotum;font-size:1em}
-> {font-family: 'Nanum Barun Gothic' ,dotum;font-size:1em}
초기화부분쪽에서 폰트패밀리에 이런식으로 따옴표도 추가해보시겠어요?
경로는 맞는거 같아요.
폰트변경후 인터넷 캐시삭제를 하고 확인하셨나요?
캐시삭제를 안하면 반영이 안되서 보일수있습니다
캐시삭제하고 확인했습니다.
폰트패밀리에 따옴표도 추가해 봤는데, 아무런 변화가 없네요. 그냥 포기해야 할거 같아요. 답변 감사합니다.
마지막으로 HTML 코드에서 CSS가 제대로 연결되었는지 다시한번 확인해보세요.
그리고 위의 코드에서
@charset "utf-8";
/* SIR 지운아빠 */
CSS
에서 CSS가 주석처리 안되있는거 같은데 이것도 한번 확인해보세요~~
네, 감사합니다. 다시 이것저것 해봐야 겠네요.
@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}
이렇게 해도 안 되네요. 캐시 삭제도 해봤구요. 그냥 포기해야 할것 같습니다. 답변 주신 분들 감사합니다.
네, 좋은 정보 감사합니다.
해결하셨나요?
못 했습니다.
