[카페24 쇼핑몰] 웹폰트 적용방법

안녕하세요 ^^

카페24 쇼핑몰에 관한 기본적인 요약설명과 간편하게 쓸수있는 슬라이드를 소개해드렸는데요

이런 기본적인것들만 알아도 많은 도움이 되지만 사이트를 예쁘게 만들고 싶다면 웹폰트가 빠져선 안된다고 생각합니다~

 

구글 웹폰트를 소개드릴 예정인데요

구글 웹폰트는 안정성있고 이제는 한글웹폰트도 많이 올라와서 많이 쓰게되더라구요~ 

자 그럼 고고싱 ^^ㅎㅎ

 

https://fonts.google.com/

Google Fonts

사이트를 들어가시면 위의 그림처럼 뜨는데요

Search fonts을 클릭해서 원하는 폰트를 넣으면 바로 웹폰트리스트가 나옵니다.

 

예를들어서 Noto Sans KR폰트를 검색해보았는데요

폰트이름 옆에 주황색 +버튼을 클릭하시면 오른쪽 아래에 Family Selected가 나옵니다.

 

구글 웹폰트 Noto Sans KR 폰트

Family Selected을 클릭하시면 위의 팝업이 나오는데요

 

A. Embed Font

 

1. STANDARD 

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">

 

2. @IMPORT 

<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
</style>

head안에 넣어야하는 소스가 두가지가 나오는데요

이왕이면 첫번째인 STANDARD을 추천해드려요

두번째인 @IMPORT을 넣어서 해봤는데 안되더라구요 ㅎㅎ;

 

 

B. Specify in CSS

font-family:'Noto Sans KR', sans-serif;

 

css파일안에 폰트를 지정해줄 소스입니다.

 

 

C. CUSTOMIZE

웹폰트 폰트 굵기지정

웹폰트마다 폰트 굵기를 선택할수있는데요 

CUSTOMIZE 탭을 클릭하시면 위의 그림처럼 체크할수있는 부분이 나옵니다.

 

원하는 굵기를 선택하고 다시 EMBED을 클릭하시면 아래의 부분처럼 나오는데요

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap" rel="stylesheet">

 

기본소스에서 100,300,~ 이런식으로 소스가 생성되고

css안에서 font-weight:100; font-weight:300;이런식으로 폰트굵기를 지정해서 사용할수있습니다.

 

자그럼 카페24 쇼핑몰 스킨에 웹폰트 소스를 넣어보겠습니다 ^^

 

1. 웹폰트를 넣어줄 쇼핑몰 스킨의 스마트 디자인 편집창을 열어주세요.

스마트디자인편집창 탭

전체화면 보기탭 > 레이아웃폴더 > 기본레이아웃폴더 > 메인레이아웃,공통레이아웃 을 클릭해서 파일을 열어주세요

 

 

2. 각각 메인레이아웃, 공통레이아웃 head안에 빨간색 박스의 소스를 넣어주세요.

메인레이아웃, 공통레이아웃 head

 

 

3. /layout/basic/css/common.css 파일을 열어주세요. 

head 안에 <!--@css(/layout/basic/css/common.css)--> 이부분을 마우스로 위치하게되면 파일열기 버튼이 생기면 그걸눌러주세요~

 

common.css 파일

일일히 넣어줘도 되지만 이왕이면 전체부분을 적용하시는게 제일 간편한데요

common.css에 font-family:'Noto Sans KR', sans-serif;을 넣어주세요~

 

저장을 눌러주시면 전체 화면에 웹폰트가 적용된 모습을 확인하실수있습니다 ^^