매뉴얼

디자인팜 2.0 웹사이트에 폰트 적용하기

폰트 파일 준비하기

적용할 폰트의 굵기별 ttf, eot, woff, woff2 확장자 파일을 준비합니다. (확장자 별로 지원하는 브라우저가 다릅니다)

 

폰트 파일 FTP 업로드하기

관리자모드 최상단 FTP 클릭 > 취소클릭 > 폴더생성 > 'font' 폴더 생성 > 준비한 폰트파일 업로드 합니다.

 

 

 

 

CSS파일 준비하기

이제 업로드한 폰트를 사이트로 불러올 css 파일을 준비해야합니다.

 

1. 관리자모드 > 디자인관리 > 고급 디자인 관리 > 전체 화면 구성 에 접속해보시면 아래와같이 notosans.css 파일이 기본으로 로드되어 있습니다.

 

 

 

2. 아래 표시해드린 /img_up/_addon/css/notosans.css  부분만 복사를 합니다.

 

 


3. 인터넷 주소창에 사이트 주소를 입력하고 그뒤에 붙여넣기를 하면 아래와같이 notosans.css 파일의 소스를 볼 수 있습니다. 

 

 

 

4. 해당 소스를 복사하여 메모장 또는 사용하시는 에디터에 붙여넣어주시고 이제 이소스를 notosans가 아닌 나눔고딕으로 수정해줍니다.

그리고 nanumgothic.css 파일로 저장해줍니다. (파일명은 원하시는대로 저장해주세요)

 

 

 

CSS파일 FTP 업로드하기

관리자모드 최상단 FTP 클릭 > 취소클릭 > 'font' 폴더 > nanumgothic.css 파일을 업로드 합니다.

 

 

 

폰트 적용하기

새로운 폰트를 사용할때는 사이트 전체에 폰트를 적용하거나, 특정 부분에만 폰트를 적용하는 경우

이렇게 두가지의 경우로 나눌 수 있습니다.

 

1. 사이트 전체에 폰트를 적용하는 경우

관리자모드 > 디자인관리 > 고급 디자인 관리 > 전체 화면 구성 에서 아래 표시된 부분을 업로드한 nanumgothic.css파일 경로로 수정한 후

모두 저장을 눌러주면 사이트 전체의 폰트가 나눔고딕으로 변경됩니다.

 

 

 

2. 특정 부분에만 폰트를 적용하는 경우

우선 이경우에는 nanumgothic.css파일에서 아래 표시된 부분을 삭제한 후 업로드 해주셔야합니다.

 

 

 

그리고 관리자모드 > 디자인관리 > 고급 디자인 관리 > 전체 화면 구성 에서 

<load target="/img_up/_addon/css/notosans.css" device="pc"> 을 지우지 않고 그 아래에
<load target="/img_up/shop_pds/사이트아이디/design/font/nanumgothic.css"> 을 입력해줍니다.

 

 

 

마지막으로 적용하고자하는 부분의 css 파일에서 다음과 같이 font-family를 변경해주시면됩니다.

 

 

게시글 공유 URL복사
댓글작성

열기 닫기

댓글작성
top