[카페24쇼핑몰] 구글웹폰트 완벽 적용하기 100% 마스터

//[카페24쇼핑몰] 구글웹폰트 완벽 적용하기 100% 마스터

[카페24쇼핑몰] 구글웹폰트 완벽 적용하기 100% 마스터

[카페24쇼핑몰]

구글웹폰트 완벽 적용하기 100% 마스터하기

https://fonts.google.com/earlyaccess 에 현존하는 한글폰트 모두 적용하여 사용하는 방법을 공개합니다.

카페24 편집창에서 common.css 에 아래의 소스코드를 모두 추가합니다.




 

/********* HABANAS [폰트세팅] 구글 웹폰트 본고딕 & 한글 전체 적용코드 *****************/
@import url(//fonts.googleapis.com/earlyaccess/hanna.css);
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
@import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css);
@import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(//fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
/* 적용CSS 태그 */
.hanna { font-family: ‘Hanna’; }
.jejugothic { font-family: ‘Jeju Gothic’; }
.jejuhallasan { font-family: ‘Jeju Hallasan’; }
.jejumyeongjo { font-family: ‘Jeju Myeongjo’; }
.kopubbatang { font-family: ‘Kopub Batang’; }
.nanumbrushscript { font-family: ‘Nanum Brush Script’; }
.nanumgothic { font-family: ‘Nanum Gothic’; }
.nanumgothiccoding { font-family: ‘Nanum Gothic Coding’; }
.nanummyeongjo { font-family: ‘Nanum Myeongjo’; }
.nanumpenscript { font-family: ‘Nanum Pen Script’; }
.notosanskr{ font-family: ‘Noto Sans KR’; }
/* HB초이스 디자인 영문폰트 적용 */
@font-face {font-family:’Raleway’;src:url(‘/web/upload/hb/font/Raleway.eot’);src:url(‘/web/upload/hb/font/Raleway.eot?#iefix’) format(’embedded-opentype’),url(‘/web/upload/hb/font/Raleway.woff’) format(‘woff’),
url(‘/web/upload/hb/font/Raleway.ttf’) format(‘truetype’),url(‘/web/upload/hb/font/Raleway.svg#Raleway’) format(‘svg’);font-weight:400;font-style:normal;}
@font-face {font-family:’Roboto’;src:url(‘/web/upload/hb/font/RobotoCondensed-Regular-webfont.eot’);src:url(‘/web/upload/hb/font/RobotoCondensed-Regular-webfont.eot?#iefix’) format(’embedded-opentype’),url(‘/web/upload/hb/font/RobotoCondensed-Regular-webfont.woff’) format(‘woff’),
url(‘/web/upload/hb/font/RobotoCondensed-Regular-webfont.ttf’) format(‘truetype’),url(‘/web/upload/hb/font/RobotoCondensed-Regular-webfont.svg’) format(‘svg’);font-weight:400;font-style:normal;}
@font-face {font-family:’PTSans’;src:url(‘/web/upload/hb/font/PTSans.eot’);src:url(‘/web/upload/hb/font/PTSans.eot?#iefix’) format(’embedded-opentype’),url(‘/web/upload/hb/font/PTSans.woff’) format(‘woff’),
url(‘/web/upload/hb/font/PTSans.ttf’) format(‘truetype’),url(‘/web/upload/hb/font/PTSans.svg#Raleway’) format(‘svg’);font-weight:400;font-style:normal;}
@font-face {font-family:’Glyphicons Halflings’;src:url(‘/web/upload/hb/font/glyphicons-halflings-regular.eot’);src:url(‘/web/upload/hb/font/glyphicons-halflings-regular.eot?#iefix’) format(’embedded-opentype’),
url(‘/web/upload/hb/font/glyphicons-halflings-regular.woff’) format(‘woff’),url(‘/web/upload/hb/font/glyphicons-halflings-regular.ttf’) format(‘truetype’),url(‘/web/upload/hb/font/glyphicons-halflings-regular.svg#glyphicons-halflingsregular’) format(‘svg’);}
@font-face {font-family:’Noto Sans KR’;src:url(‘/web/upload/hb/font/NotoSans-Regular.eot’);src:url(‘/web/upload/hb/font/NotoSans-Regular.eot?#iefix’) format(’embedded-opentype’),
url(‘/web/upload/hb/font/NotoSans-Regular.woff’) format(‘woff’),url(‘/web/upload/hb/font/NotoSans-Regular.otf’) format(‘otf’);font-weight:400;font-style:normal;}
/* 적용CSS 태그 */
.raleway {font-family: ‘Raleway’,sans-serif;}
.roboto {font-family: ‘Roboto’,sans-serif;}
.noto { font-family: ‘Noto Sans KR’,sans-serif; }
.ptsans { font-family: ‘PTSans’,sans-serif; }

/* HB초이스 디자인 구글 머트리얼 폰트 적용 */
@font-face {
font-family: ‘Material Icons’;
font-style: normal;
font-weight: 400;
src: url(‘/web/upload/hb/font/MaterialIcons-Regular.eot’); /* For IE6-8 */
src: local(‘Material Icons’),
local(‘MaterialIcons-Regular’),
url(‘/web/upload/hb/font/MaterialIcons-Regular.woff2’) format(‘woff2’),
url(‘/web/upload/hb/font/MaterialIcons-Regular.woff’) format(‘woff’),
url(‘/web/upload/hb/font/MaterialIcons-Regular.ttf’) format(‘truetype’);
}
/* 적용CSS 태그 */
.material-icons {
font-family: ‘Material Icons’;
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: ‘liga’;
}
/********* [폰트세팅] end *****************/

사용방법은 아주 간단합니다.

* { font-family: ‘raleway’, ‘Roboto’, ‘Noto Sans KR’,’Nanum Gothic’, ‘돋움’ , sans-serif; !important; }

위와 같이  font-family에 폰트명만 입력하면 됩니다.

원하는 h1 태그에 roboto폰트를 적용하고 싶으신 경우에는 아래와 같이 적용합니다.

h1 { font-family:  ‘Roboto’ , sans-serif; }

필수!! 웹서버에 eot, woff, ttf 설치되어야 함




2017-10-03T14:35:27+00:0010월 3rd, 2017|카페24 쇼핑몰|0 Comments