안녕하세요. 스타입니다.
요새 본의 아니게 웹디자인을 하고 있습니다.
그깟 돈 얼마 아끼겠다고 웹 디자인을 시작했는데요.
저는 워드프레스로 현재 구축 중입니다.
워드프레스를 통해서 유료테마를 구입하고 홈페이지를 제작 중인데요.
가장 큰 문제는 폰트에 대한 문제였습니다.
그러던 중에 다음과 같은 방법으로 웹 폰트를 적용 할 수 있는 방법을 알아냈습니다.
@font-face 폰트 페이스
이 사이트에서 웹페이지를 볼 때 폰트 설치 유무와 상관 없이 원하는 한글 폰트로 볼 수 있게 도와주는 곳입니다.
음. 우선 설치하지 않아도 된다는 점이 좋은데 문제는 무료 폰트가 몇 개 없습니다.
또 한 가지 웹 브라우저를 가리는 편입니다. 개념은 간단합니다.
웹 폰트의 경로를 header쪽에서 설정해 주고 css쪽에서는 적용할 속성을 지정해 주면 간단히 끝납니다.
지원하는 폰트 종류
나눔고딕
나눔고딕(굵게)
나눔명조
나눔명조(굵게)
나눔손글씨 펜체
나눔손글씨 붓체
지원하는 브라우저
익스플로러 6 이상
파이어폭스 3.6 이상
사파리 3.2 이상
크롬 4 이상
적용하는 방법
header.php 파일을 찾아봅니다.
그 곳에서 <head>파일에 다음과 같은 코드를 추가합니다.
<script>
google.load( "webfont", "1" );
google.setOnLoadCallback(function() {
WebFont.load({ custom: {
families: [ "NanumGothic" ],
urls: [ "http://fontface.kr/NanumGothic/css" ]
}});
});
</script>
그리고 나서는 style.css에서 다음과 같이 적용하면 됩니다.
font-family: 'NanumGothic';
}
예제는 다음과 같이 되겠습니다.
<head>
<style>
.wf-active body {
font-family: 'NanumGothic';
font-size: 48px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load( "webfont", "1" );
google.setOnLoadCallback(function() {
WebFont.load({ custom: {
families: [ "NanumGothic" ],
urls: [ "http://fontface.kr/NanumGothic/css" ]
}});
});
</script>
</head>
<body>
<h1>fontface.kr의 한글 폰트를 이용한 페이지</h1>
</body>
</html>
테마 적용기
여기서 끝나면 다른 강좌와 다를 바가 없죠.
제가 겪은 내용을 조금 더 추가해서 설명해 드리도록 하겠습니다.
제가 구입한 테마는 Jarvis라는 원페이지 테마입니다. 그런데 문제가 발생했습니다.
너무 잘만들어둔 것이 문제. 아래 이미지 처럼 폰트를 따로 타이포그라피를 제공해 주는거에요.
근데 문제는 워드프레스가 영어권 국가에 최적화 되어 있어서 한글 폰트를 전혀 지원을 안하는 것이었습니다.
그래서 어떻게 할까 고민하다가 전체 css를 한글 폰트로 뒤엎어 버릴 계획을 세웠습니다.
그런데 아무리 찾아도 style.css를 열어서 확인해 봐도 font-family를 찾지 못하는거에요.
여기서 당황하기 시작했죠.
그래서 안되는 영어를 막 뒤져가면서 서포트 홈페이지에 가서 계속 QnA들을 뒤졌습니다.
서포츠 홈페이지를 뒤지다가 custom-style.css가 있다는 사실을 발견하게 됩니다.
여기에 폰트 정보가 있더군요. 원래는 이것저것 코드가 많이 적혀잇었는데 싹 지우고 font-family: 'NanumPen';
이렇게만 기입하게 되었더니 성공했네요.
휴우. 이거 때문에 오늘 몇 시간을 공부한건지 모르겠네요.
font-family: 'NanumPen';
font-size: <?php echo $smof_data['rnr_body_text']['size']; ?>;
<?php if( $smof_data['rnr_body_text']['style'] == 'bold' )
{?>
font-weight: bold;
<?php } else if( $smof_data['rnr_body_text']['style'] == 'bold italic' )
{?>
font-weight: bold;
font-style: italic;
<?php } else { ?>
font-style: <?php echo $smof_data['rnr_body_text']['style']; ?>;
<?php } ?>
color: <?php echo $smof_data['rnr_body_text']['color']; ?>;
font-weight: <?php echo $smof_data['rnr_body_font_weight']; ?>;
}
일단 한고비는 넘겼는데 이게 또 다른 문제가 발생했네요.
어째서 익스플로러랑 크롬이랑 폰트 적용이 다른지 모르겠어요.
아마 header.php 문제같은데 쉽게 잡히지가 않고 있네요.
윈도우 버전 - 폰트 적용이 안되어 있다.
크롬버전 - 폰트 적용이 되어 있다.
골치가 아프네요. 익스플로러가 문제인건지 코딩을 잘못한건지.
일단 오늘은 머리 아파서 이만 하도록 할게요.
html5를 이용해서 홈페이지 만드는 일이 쉬운 일만은 아니네요.
지금 이 책을 가지고 만들고 있습니다. 도서 리뷰는 따로 해드리도록 할게요.
워드프레스 실전활용 블로그형 홈페이지 웹사이트 만들기
- 저자
- 황홍식, 김지훈, 이종율, 심기훈, 송지훈 지음
- 출판사
- 앤써북 | 2013-03-10 출간
- 카테고리
- 컴퓨터/IT
- 책소개
- 앤써북 워드프레스 시리즈 2탄_국내 최초의 중급 실전활용서! 이...
'스타의 도서관 > 웹 개발' 카테고리의 다른 글
| [포토샵강좌] 포토샵으로 움직이는 짤(움짤) GIF 파일 만들기 20141220 (0) | 2014.12.20 |
|---|---|
| 네이버 RSS 등록가능하도록 변경하는 방법(외부수집허용) (0) | 2014.06.28 |
| AAA Logo를 이용해서 간단한 텍스트 로고 만드는 법 (11) | 2013.08.08 |
| HTML5+CSS (2) (0) | 2013.06.25 |
| XAMPP 설치하기 (2) | 2013.06.24 |