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

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

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

※ 2편은 웹폰트가 아닌 다운로드한 폰트를 업로드하여 사용하는 방식입니다.

 

폰트 변경 순서

 

https://fonts.google.com/ (구글폰트 바로가기 링크)

※ 구글 폰트에서 Embed 코드도 제공하지만 다운로드도 가능합니다.

 

사이트로 이동하셔서 원하는 폰트를 선택한 이후 원하는 폰트를 다운로드합니다.

 

 

 

 

다운로드한 폰트 파일을 아래의 메뉴를 찾아 업로드하고 업로드된 파일을 우클릭하여 링크 주소를 복사합니다.

( 꾸미기 ▶ 스킨 편집 ▶ html 편집 ▶ 파일 업로드 탭 )

※ ttf 확장자를 가진 파일 하나를 업로드하시면 됩니다.

 

※ 꾸미기는 블로그 글쓰기 버튼에서 하단으로 스크롤하시면 찾을 수 있습니다. 

※ 파일업로드 용량 제한이 20MB로 꼭 필요한 파일만 업로드를 해야 합니다.

 

 

 

해당 메뉴로 이동하여 가장 하단에 아래의 문구를 추가하고 수정합니다.

( 꾸미기 ▶ 스킨 편집 ▶ html 편집 ▶ CSS 탭 )

※ Embed 형식과 다르게 font name을 자유롭게 작성이 가능합니다.

 

@font-face {

font-family: '폰트이름 적기 ex) newFont1';		
   src: url('복사한 주소 붙여넣기') format('truetype');        
}

@font-face {

font-family: '폰트이름 적기 ex) newFont2';		
   src: url('복사한 주소 붙여넣기') format('truetype');        
}

 

 

 

텍스트를 입력하고 CSS에서 입력한 FontName을 입력해줍니다.

 

<p data-ke-size="size16"><b>New Font Test</b></p>

<p data-ke-size="size16"><b><span style="font-family: 'NewFont1';"> New Font Test </span></b></p>

<p data-ke-size="size16"><b><span style="font-family: 'NewFont2';"> New Font Test </span></b></p>

 

 

 

결과를 확인하면 2, 3번째의 문장에 폰트가 적용된 것을 확인할 수 있습니다.

※ CSS를 잘 활용하면 다양한 방식으로 font를 입히는것이 가능합니다.