[Tistory] 블로그에 웹폰트 적용하기 - 나눔스퀘어라운드

clover__ 2019. 2. 14. 11:37

2019. 2. 14. 11:37

웹폰트 적용하는건 간단하다.

1) 웹폰트 파일(혹은 CDN주소)

2) CSS에 적용

👉 웹폰트 파일을 찾으러 가보자.

Google Font : Google에서 제공하는 웹폰트 프리뷰

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

1) 나눔고딕 코딩

Embed Font

To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.

STANDARD @IMPORT

<style>
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding|Noto+Sans');
</style>

Specify in CSS

Use the following CSS rules to specify these families:

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

font-family: 'Nanum Gothic Coding', monospace;

2) 나눔스퀘어라운드 : 요즘에 많이 쓰인다는데 이쁘다. (난 요걸로 PICK!)

> https://github.com/innks/NanumSquareRound

Build software better, together

GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects.

github.com

👉 이제 다 찾았으니 티스토리에 적용해보자.

기존에 import되었던 폰트를 나눔스퀘어라운드로 변경하고 /**/ 를 사용하여 기존 소스를 주석처리 한다.

@charset "UTF-8";

/*@import url('https://fonts.googleapis.com/css?family=Lato:400,700');*/

@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');

font-family에 추가해준다.

아마 순서가 Apple SD Gothic Neo가 먼저 되어 있을 텐데, 난 이번에 추가한 폰트를 맨 앞에다 추가했다.

body, button, input, select, table, textarea {

  color: #333;

  font-family: 'NanumSquareRound', "Apple SD Gothic Neo", "Nanum Gothic", 'Lato', Helvetica, sans-serif,  "Noto Sans KR" ,"Malgun Gothic", "맑은 고딕", Dotum, '돋움' ;

}

그럼 끝. :

저작자표시 비영리 변경금지

'Etc > Tistory' 카테고리의 다른 글

[Tistory] 티스토리 OpenAPI 사용하기 - 2. 오픈API 인증키 받기 with 포스트맨(PostMan) (0)	2020.02.07
[Tistory] 티스토리 OpenAPI 사용하기 - 1. 오픈API 신청하기 (0)	2020.02.06
syntaxhighlighter 사용하여 블로그에 소스 입력하기 (0)	2014.08.20

Hello! Hola! Hej!