글꼴 사이트 / 티스토리 글꼴 편집

글꼴 사이트 

 

1. 눈누

눈누

• 웹폰트 사용 쉬움 (코드 복사 가능)  !!!!!!  (css에 적용할 때에는 주로 이 사이트 이용)
• 로그인 - 다운로드 시 필요 x , 폰트 질문 시 필요
• 다운로드 시에는 원본 사이트로 리다이렉트 (안심 다운로드 가능)
• 라이센스 요약표가 있어 손쉽게 적용 가능
• 테스트 문구 작성하고, 그 문구대로 폰트 검색 가능 
• 웹사이트/영상물 등에서 폰트 질문도 가능  (단, 폰트 질문은 로그인 해야만 볼 수 있음)

 

눈누 폰트 상세페이지

 

 

테스트 문구 미리보기 가능

 

눈누 폰트 질문

 

 

 

 

---

2. 공유마당

무료폰트(목록) | 공유 마당

• 로그인 x
• 다운로드 시에는 ZIP파일 다운로드 가능
• 공신력있는 사이트 (한국저작권위원회)
• (+ 추가로, 글꼴 뿐 아니라 이미지. 음악 등도 다운로드 가능)
• 저작권 보기가 있음 (가독성이 좋지는 않음)

- 테스트 문구를 미리 써볼 수는 없음 

공유마당

 

 

 

 

---

3. 구글 폰트

Browse Fonts - Google Fonts

• 로그인 x
• 다운로드 시에는 ZIP파일 다운로드 가능
• 한글 뿐 아니라 다양한  나라의 언어 폰트 다운로드 가능
• 라이센스 확인 가능 
• 웹폰트 사용 쉬움 (코드 복사 가능)  !!!!!! 
  • 폰트 상세페이지의 Regular 버튼을 클릭해 웹 폰트 코드 복사 가능
• 테스트 문구 
  • 1. 테스트 문구 작성 후 검색 가능
  • 2. 특정 폰트 상세 페이지 -> 더 많은 글 테스트 가능 (글자 크기, 색, ... 지정 가능)
• 참고로, 저작권 무료인 - apache license 2 - 아이콘도 사용 가능 ! (https://developers.google.com/fonts/docs/material_icons?hl=ko) 

구글 폰트 - 테스트 문구 입력 1, 2

 

폰트 상세페이지 -> Regular 버튼 클릭 -> 웹 폰트 코드 복사 가능

 

 

---

 

티스토리 글꼴 편집법

 

예를 들어, 눈누에서 해당 폰트를 티스토리 내 블로그에 반영하고 싶다 !

적용할 글씨체

 

 

1. 이때, 웹폰트로 사용 부분의 코드를 복사하자

웹폰트로 사용 (복사)

@font-face {
    font-family: 'Giants-Inline';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Inline.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

 

 

 

2. 티스토리 -> 블로그 관리 -> 꾸미기 -> 스킨변경 클릭

 

 

 

3. 사용중인 스킨 편집 클릭

사용중인 스킨 편집

 

 

 

4. HTML 편집 클릭

HTML 편집

 

 

 

5. CSS -> [command/ctrl + f] font-family 입력

font-face 찾기

 

 

 

6. font-family 자리에 1번에서 복사한 코드 붙여넣기 

• 참고로, 기존 코드는 주석처리했다 (드래그 후 [mac] command + / 키로 주석처리 가능)

 

 

7. 계속해서 [command/ctrl + f] 키를 이용해 'font-family'를 찾아서 수정

font-family에 "Giants-Inline"(font이름) 추가

 

 

 

 

8. 적용 버튼 누르면 끝 ! (새로고침으로 적용 확인)

적용 확인