티스토리 뉴비가이드 폰트 변경 방법 1편

티스토리 뉴비가이드 폰트 적용 1편

※ 티스토리에서 기본폰트가 아닌 폰트를 적용할 때 사용됩니다.

※ 1편은 웹폰트를 임베드하여 사용하는 방식입니다.

 

폰트 변경 순서

https://fonts.google.com/  (바로가기 링크)

사이트에 접속하면 왼쪽 필터 창에서 희망하는 언어를 선택하고 우측에 맘에 드는 스타일의 폰트를 선택하시면 됩니다.

※ 해당 사이트의 폰트들은 오픈 소스 폰트 라이선스로 수정 및 재배포 상업적 이용이 가능합니다. 

선택한 폰트를 가져오는 방식을 선택합니다. (Get Font ▶ Get Emebed Code 선택)

선택한 폰트의 Embed 코드를 복사합니다.

※ link 코드는 폰트를 불러오는데 필요한 필수코드입니다.

※ CSS 코드는 필수는 아니지만 중복을 방지하고 특정 텍스트만 적용하는 데 사용됩니다.

 

 

복사한 코드를 나의 HTML 편집창에 붙여 넣습니다.

※ 블로그 글쓰기 버튼에서 하단으로 스크롤을 내리면 ( 꾸미기 ▶ 스킨 편집 ▶ html 편집 ▶ HTML 탭 )

 

 

동일한 방식으로  CSS도 복사 및 붙여 넣기 합니다.

※ 메뉴 위치는 동일하며 마지막 html 편집 ▶ CSS 탭 선택

※ CSS 편집창 가장 하단에 붙여 넣습니다. (주석도 달아주면 좋습니다.  /* 주석 사용 */)

첫 문장은 폰트가 미적용된 텍스트 이며 2, 3번째 폰트를 각각 다른 방법으로 적용한 문장입니다.

※ 외부에서 불러온 폰트는 작성 완료 후 확인 가능합니다.

 

<p data-ke-size="size16"><b>Font name Single day</b></p>
<p data-ke-size="size16"><b><span style="font-family: 'single day';"> Font name Single Day </span></b></p>
<p data-ke-size="size16"><b><span class="single-day-regular"> Font name Single day </span> </b></p>

 

 

위는 폰트가 미적용 아래는 폰트가 잘 적용된 결과 화면입니다.