[그누•영카트] 구글 웹폰트를 적용해보자
페이지 정보
루루아빠
2,895
2015.10.27 00:57:58
짧은주소
-
https://yadolee.com/tip/323 주소복사
본문
'관리자 > 레이아웃 추가설정 > 추가 script, css' 에 아래 소스 중 선택하여 추가한다.
1. css import 방식
문서 전체에 적용하기 위에 상기 소스 아래에 다음 스타일을 적용한다.
1. css import 방식
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
2. link import 방식
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
3. 웹폰트 로더 동기방식
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
// For google fonts
google: {
families: ['Droid Sans', 'Droid Serif']
}
// For early access or custom font
custom: {
families: ['Nanum Gothic'],
urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
}
});
</script>
4. 웹폰트 로더 비동기 로딩 방식
<script type="text/javascript">
WebFontConfig = {
custom: {
families: ['Nanum Gothic'],
urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
문서 전체에 적용하기 위에 상기 소스 아래에 다음 스타일을 적용한다.
<style>
body {
font-family: 'Nanum Gothic', sans-serif;
font-size: 12px;
}
</style>
추천인
레벨 101
경험치 1,519,440
Progress Bar 14.66%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
최신댓글이 없습니다.


댓글
첫 번째 댓글을 남겨 주세요