본문 바로가기
정보

[티스토리] 기본글꼴 나눔고딕으로 변경 하는 방법_구글폰트(Google fonts) 웹폰트

by 나도잘 2020. 11. 9.
반응형

 

블로그 포스팅을 하면서 조금 불편했던 부분이 있다.

바로 폰트 설정!

블로그 전체 포스팅을 완료한 뒤 폰트 스타일을 적용하는데,

몇몇  부분들이 가끔 적용이 안될때 가 있다.

그래서 일일이 선택해서 바꿔 줘야 하는데 조금 번거로웠다.

 

열심히 검색을 했다.

 

여러 방법이 있었지만 구글 폰트를 이용한 스킨 기본 글꼴 변경하는 방법만 성공했다.

적용이 안되는 이유는 모르겠지만 성공한 방법만 정리해 본다.

 

 

 

1. 구글 폰트 _ [나눔고딕]

폰트 중에서 보편적으로 많이 사용하는 [나눔 고딕]을 선택했다.

가독성이 좋아 블로그나, 문서 작업할 때 많이 사용하는 폰트이다. 

 

fonts.google.com

 

Google Fonts

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

fonts.google.com

구글 폰트 페이지에서 Nanum Gothic로 검색한 뒤 해당 페이지로 이동한다.

 

 

Regular 400

Bold 700

Extra - bold 800

세 가지스타일을 모두 선택한다

 

[+Select this style] 메뉴를 클릭하면

Selected family 메뉴가 나타 난다.

 

Use on the web에서 @import 선택!

아래 영역 코드를 복사한다

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

 

 

[ 계정 - 스킨 편집 - html 편집 - CSS ]에 '붙어 넣기'를 해 주고 [적용] 버튼을 누른다.

*코드 붙여 넣기 위치는 나중에 수정하기 쉽게 font-family 앞부분에 복사 해 두었다.

 

 

다음 구글 폰트 페이지 CSS rules to specify families에서 코드를 복사한 다음

{font-family: 'Nanum Gothic', sans-serif;}

body와

{font-family: 'Noto Sans KR', Arial, ~} 사이에 복사한 코드를 붙여 넣기 한다.

 

*body

{font-family: 'Nanum Gothic','Noto Sans KR', Arial, "Apple SD Gothic Neo", ~

이런 식으로 붙여 넣기 하는 방법도 있다.

하지만 나는 적용했을 때 글꼴 변경이 되지 않았다.

 


나도잘

by. nadojal

 

반응형

댓글