티스토리 블로그 원하는 웹폰트 적용하기

티스토리 블로그를 운영하다 보면 다른 포털 블로그들 보다는 꾸미는데 있어서 더 자유롭기 때문에 이것저것 나만의 스타일로 바꾸고 싶을 때가 있을 것이다. 본문자체는 글쓸때 편집창에서 기본적으로 정해진 폰트들로 바꿀수는 있지만, 그외에 블로의 스킨에 사용된 폰트를 바꾸고 싶을 때도 있을 것이다.

그래서 오늘은 티스토리 블로그의 폰트를 구글폰트를 이용해서 바꾸는 방법을 알아보고자 한다. 웹코딩이 가능하신 분들은 기본적인 내용이라 그냥 넘어가셔도 좋고, 초보분들을 위한 팁임을 미리 알린다.

우선 구글에서 구글폰트라고 검색을 하면,

위와 같이 구글폰트 사이트가 바로 나온다. 클릭.

구글폰트로 들어가면 위와 같은 화면이 나오는데, 다양한 폰트들이 폰트명과 함께 보인다.

우리는 한글이 써지는 폰트를 사용해야 하니,

위쪽의 선택메뉴중에 'Language'라는 메뉴를 클릭해서 나오는 언어중에 Korean을 선택해 준다.

그럼 아래의 폰트들중에 한글을 지원한는 폰트들만 나타난다. 폰트명 알래 예문들이 적혀 있는데, 클릭해서 직접 문장을 작성해 보면 해당 폰트로 보여진다. 폰트를 고를 때 한 번씩 작성해 보면 좋다.

나온 폰트들 중에서 예시로 제일 유명한 폰트인 '나눔고딕(Naum Gothic)'을 선택한다.

폰트를 클릭하면 해당 폰트의 두께별 예시와 여러 메뉴들이 나오는데, 사용하려고 하는 각 두께별 예시문장의 오른쪽에 있는 '+Select this style'을 클릭한다. 모든 두께를 사용하고 싶으면 전부다 클릭해준다.

+Select this style 버튼을 누르면 오른쪽에 슬라이드창으로 선택한 두께의 폰트들이 표시되면서 자동으로 HTML에 삽입할 수 있는 소스가 나온다.

티스토리 블로그 스킨편집에서 HTML에 해당폰트를 선언하는 두가지 방법이 있는데, 간편하게 삽입만 하면 되는 <link>를 체크해준다. 기본이 체크되어 있을 것이다.

그리고 바로 밑에 CSS에서 선택한 폰트롤 지정하는 소스가 함께 나온다. HTML이나 CSS를 몰라도 아래에서 정해주는 위치에 복사, 붙여 넣기하면 원하는 폰트를 사용할 수 있다.

위 구글폰트창은 선택한 대로 놔두고, 새창을 열어 수정하려는 티스토리 블로그의 관리자로 로그인한 후 스킨편집으로 들어간다. 스킨편집으로 들어가면 새창과 함께 위와같은 화면이 나오는데, 우측 상단의 'HTML편집'버튼을 눌러준다.

HTML편집 버튼을 누르면 위와 같이 해당 블로그의 소스들이 쭉 나오는데, 가장 쉽게 삽입할 수 있게, <head>라고 되어 있는 바로 밑에 부분에, 구글폰트에서 설정했던 <link> 바로밑의 소스를 붙여 넣어준다.

이 소스는 내 블로그에 위에서 선택한 나눔고딕 폰트를 사용하겠다는 일종의 선언이다.

소스를 붙여 넣었으면 우측 상단의 적용버튼을 눌러 준다음, 다음 실제 적용 소스를 삽입하기 위해 중앙의 CSS메뉴를 누른다.

CSS메뉴를 누르면 소스가 바뀌면서 CSS소스들이 쭉 나온다. HTML이 뼈대를 이루는 소스라면 CSS는 그 뼈대에 이쁘게 살을 붙여주는 소스라고 생각하면 이해가 쉽다.

HTML에서 나눔고딕 폰트를 사용한다고 선언을 했으니, CSS에서는 어디에 나눔고딕을 사용할건지 실제로 적용하는 부분이다.

소스창에서, 조금만 내려오면 Body 라고 되어 있는 소스 밑에 font-family: .. 로 시작하는 소스가 있다.

그 한줄을 통째로, 구글폰트에서 선택했던 오른쪽 창의 'CSS rules to specify families'라고 써있는 곳의 바로 밑에 있는 'font-family: 'Nanum Gothic', sans-serif;' 이 부분을 복사해서, 해당자리에 붙여 준다. 기존 소스에 덮어 씌워주는 것이다.