2019. 2. 14. 11:37ㆍEXPERIENCE/Tistory
웹폰트 적용하는건 간단하다.
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.
@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, '돋움' ;
}그럼 끝. :
'EXPERIENCE > Tistory' 카테고리의 다른 글
| [Tistory] 티스토리 OpenAPI 사용하기 - 2. 오픈API 인증키 받기 with 포스트맨(PostMan) (0) | 2020.02.07 |
|---|---|
| [Tistory] 티스토리 OpenAPI 사용하기 - 1. 오픈API 신청하기 (0) | 2020.02.06 |
| syntaxhighlighter 사용하여 블로그에 소스 입력하기 (0) | 2014.08.20 |