티스토리 블로그 폰트 변경: 본고딕(Noto Sans CJK KR)으로 바꾸기

티스토리 블로그 폰트 변경: 본고딕(Noto Sans CJK KR)으로 바꾸기

티스토리 블로그 폰트 변경


블로그의 체류시간을 늘리기 위해서는 가독성이 좋아야 하고, 가독성을 높이기 위해서는 폰트가 깔끔해야한다.


이번 시간에는 티스토리에서 흔히 많이 사용하는 나눔고딕 대신, 본고딕(Noto sans CJK KR)로 변경하는 방법에 대해 알아보겠다.

 



시작하기에 앞서


인터넷에 있는 폰트 변경 정보들을 그대로 따라 했음에도 본고딕 폰트를 완벽히 적용시키는데 수 시간이 소요되었다. 그 이유는 인터넷에 주로 올라와 있던 웹폰트 적용 방식이 먹히지 않았기 때문인데, 원인과 해결 방법을 알게 되어 따로 이 글을 작성하게 되었다.



필자도 잘못 알았던 부분이라 혹시나해서 이야기 하는데, 만약 자신이 웹폰트 방식으로 본고딕 폰트를 적용 시켰다면 모바일에서도 제대로 나타나는지 확인 하도록 하자. 필자가 확인 했을때는 PC에서는 제대로 보이지만 모바일에서는 적용이 되지 않은 상태였고, 이상해서 다른 PC로 확인해보니 역시나 거기서도 적용이 되지 않았었다.



원인은 웹폰트를 끌어다 쓸 경우 방문자의 PC나 핸드폰에 본고딕 폰트가 설치되어 있어야 적용된다는 사실 때문이었는데, 이는 아래에서 설명하는 파일을 업로드 하는 방식으로 해결이 가능 하다.

 



본고딕(Noto Sans CJK KR)


위 - 나눔고딕 / 아래 - 본고딕



티스토리에서는 주로 나눔고딕을 사용 하는 경우가 많은데, 얼마 전 브런치에서 글을 작성하던 중 폰트가 깔끔하다고 생각을 해서 찾아 보았더니 '본고딕'이라는 글꼴이었다.



본고딕은 구글과 어도비의 합작품으로 다양한 언어와 굵기도 7가지나 지원을 하지만, 그 만큼 용량이 커서 티스토리에서 사용하기에는 다소 무겁다는 단점이 있다보니 주로 웹폰트로 끌어다 쓰는 방법을 많이 이용 했는데, 위에서 이야기했듯 저 방법은 오류가 있었다. (이 부분은 단순히 Fastboot 스킨의 오류일지도 모른다.)

 

하지만 결국 간소화된 파일을 찾아서 해결할 수 있게 되었으니, 혹시 본고딕 폰트 적용을 못하고 있었다면 참고하길 바란다.


Noto Sans CJK KR 적용방법



위의 파일을 받아서 압축을 풀고 티스토리 스킨편집창에 들어간다.





상단 오른쪽 끝에 있는 '파일 업로드'에서 아까 압축을 풀었던 파일들을 추가 하면 되는데, 'notokr-regular.eot, woff, woff2' 이 세 개를 모두 업로드 해준 뒤 저장을 하고 CSS로 들어간다.





'charset'위에 텍스트에 적혀 있는 'font-face' 부분 전체를 복사해서 붙여넣어주면 되는데, 만약 기존에 다른 폰트를 적용했던게 남아 있다면 기존에 있던 폰트 페이스를 지우고 텍스트 파일에 있는 걸 넣으면 된다. 



그리고 사진 27번 항목에 있는 것 처럼 'font-famliy'를 찾아서 파일에 있는 'notokrR, sans-setif'를 넣어 주면 된다. 이게 앞에 있는 글꼴이 우선 적용되는 방식이니 뒤에 있는 것도 지워줘도 상관 없다. 



 마무리



이상하게 인터넷에 이와 관련된 정보가 별로 없다보니 적용하는데 애를 먹었는데, 결과적으로 성공 했고 이러한 경우가 있다는 것 을 알았으니 새로운 지식을 얻은 것 에 만족해야겠다. 추후에 원하는 폰트를 블로그에 업로드해서 사용할 수 있도록 변환하는 방법에 대해서도 작성해 보도록 할 예정인데, 점점 잡지식이 늘고 있는 것 같다는 생각이 든다. (하하하)



아 덧붙여서 기존에 나눔고딕 등의 글꼴 파일을 업로드했던 상황이라면 지워주는 게 좋은데, 블로그의 불필요한 용량을 최대한 줄이는게 모바일 최적화에 있어서 중요하기 때문이다.


-다른정보-

블로그 방문자 늘리기: 메타블로그 등록과 종류를 알아보자.

티스토리 이웃관리 방법: RSS리더 feedly 이용하기


댓글(41)

  • 2018.05.09 18:59 신고

    요런정보 완전 감사하네요 저같이 암것도 모르는 사람한텐 꿀딥이네요꿀팁

    • 2018.05.10 22:24 신고

      이 폰트로 바꾸고 싶은데 변경을 못해서
      꽤 오래 고생을 했었거든요. ㅎㅎ

      이번에 확실히 변경하는데 성공해서
      올려보았습니다~

  • 2018.05.09 19:43 신고

    저도 폰트 바꾼지 오래 되었네요.
    언제 한번 폰트 또 바꿀까 하고 있어요.ㅎㅎㅎ

    • 2018.05.10 22:25 신고

      아무래도 한번 설정해두면 잘 안바꾸게 되니까요.

      저는 이번에 이 서체에 딱 필받아서
      바꾸려고 엄청 만져봤네요. ㅎㅎ

  • 2018.05.09 21:46 신고

    아 이런식으로 해서 글자체가 예쁘게 나오게 했군요. 전 원래 있는 기존의 폰트를 사용하고 있네요. 귀차니즘 때문에요.
    확실히 다운받아서 이렇게 예쁘게 글자체가 읽기도 좋지요.


    오늘 회사가기 싫었는데
    그래도 와서 일하고 있슴..
    정말..오늘은 쉬고 싶은날이네요
    몸이 좀 안좋아요.
    많이 무겁고 왜 바디가 잘 안다고 하잖아요
    쉬어줘야할때를..오늘이 그날인듯..ㅜㅜ

    뭐하심?
    글을 많이도 올리셨군요 ㅋㅋ
    완전 읽을꺼리 많아서 좋아요.
    대단하심.. ㅋㅋㅋ 전 한개도 겨우올리고 있어욤..ㅜㅜ

    • 2018.05.10 22:26 신고

      데보라님 댓글을 이제서야 몰아보네요.
      요즘 일에 대한 권태기가 오신걸까요 ㅠㅠ

      글을 자동으로 올라가게 설정을 해두다보니
      2일 연속 스킨에 대한 글이라 심심하셨겠어요~

      지금 밀린 답글 다느냐고 바쁜 상태인데
      이거 다음에는 이웃님들 블로그도 돌아보려고요!

      데보라님 블로그는 제일 먼저 들어가서 댓글 하나 남겨놓고 왔는데,
      이따 마지막에 또 들어갈거니까 기다려주세요~^^

  • 2018.05.10 00:21 신고

    감사합니다

  • 2018.05.10 02:26 신고

    좋은 정보네요.
    애 먹는 많은 유저분들을 위한 멋진 팁이라 생각들어요. ^^

    • 2018.05.10 22:28 신고

      나눔고딕은 파일이 많아서 쉽게 적용시킬 수 있었는데
      유독 이 본고딕은 조금 힘들더라고요. ㅎㅎ

      필요하실때 도움되었으면 좋겠습니다 ^^

  • 2018.05.10 07:23 신고

    블로그 운영을 위해 좋은팁 감사합니다!

  • 2018.05.10 10:14 신고

    본고딕 저도 적용해봐야겠어요~~
    정말 깔끔하네요~~

    • 2018.05.10 22:29 신고

      그렇죠? 다음 브런치에서 본고딕이 기본 서체 였는데, 블로그에도 적용시키고 싶더라고요 ^^

      혹시 실패하시면 말씀해주세요`

  • 2018.05.10 10:23 신고

    알아둘 필요는 있어 보입니다 ㅎ
    폰트도 각자 취향인것 같습니다

    • 2018.05.10 22:29 신고

      그렇죠. ㅎㅎ 아무래도 사이즈부터도 저는 작은 글씨를 선호하지만, 큰 글씨를 좋아하는 분들도 계시고, 서체도 취향이 많이 갈리니까요~

      내 마음에 들고, 다른 사람이 보기에도 불편하지 않은게 딱 좋은거 같아요. ㅎㅎ

  • 2018.05.10 11:32 신고

    와~ 예전에 어떤 블로거분께서 저에게 글씨체를 바꾸면 좋겠다고 조언을 주셨었는데,
    이렇게 바꾸면 되는군요!!
    당장 시도하다가 실패했어요..ㅠㅠ
    지금은 다른 일을 해야해서 다음에 다시 시도해봐야겠어요..!!
    좋은 정보 감사합니다^.^

    • 2018.05.10 22:31 신고

      앗! 실패하셨나요? 어떤 부분이 잘못되었는지 모르겠네요.

      이게 스킨마다 조금씩 차이가 있는데, 아마 폰트 페이스 부분은 제일 위에 붙여주시는건 공통사항이고,

      마지막에 그 폰트 붙여넣는거를 여러곳에 적용시켜야 하는 경우일 수 있어요.

      스킨 이름이 어떻게 되시나요?
      한번 직접 적용시켜볼게요. ㅎㅎ

    • 2018.05.11 21:39 신고

      저 다시 적용해봤는데요!!
      댓글이나 메뉴 글씨체는 바뀐 것 같아요ㅎㅎ
      그런데 본문에는 글씨체를 어떻게 적용해야 하는지 모르겠네요^^;

      제 스킨은 CCZ-CROSS라고, 어떤 블로거분께서 제공하시는 스킨을 다운받은거에요!

    • 2018.05.12 20:37 신고

      확인해보고 답변 드리겠습니다 ^^

  • 2018.05.10 12:30 신고

    가독성이 있는 폰트군요.
    좋은 정보 잘 보고 갑니다.
    행복한 하루 되세요~^^

    • 2018.05.10 22:32 신고

      ㅎㅎ 보기 편하시다니 다행입니다.
      휴식님도 행복한 밤 보내세요 ^^

  • 2018.05.10 15:21 신고

    폰트도 바꿀수 있는거였네요 ㅎㅎ
    좋은 정보 감사합니다 ^^

    • 2018.05.10 22:32 신고

      네 디지님의 경우 저랑 스킨이 똑같으셔서
      저랑 똑같은 방법으로 바로 적용이 되실거에요. ㅎㅎ

  • 2018.05.10 21:47 신고

    완전 꿀팁이네요! 하스텐님 글읽으면 항상 가독성이좋고 깔끔한느낌이라 어떻게 하시나 궁금했는데 요런알짜배기 글을 올려주셨네용ㅎㅎ제 블로그는 폰트가 너무 깨치는거처럼 보이고 얇아서 좀 바꾸고싶었는데 폰트만 바꿔도 좀 깔끔해지겠죠ㅠ? 중간중간 블로그 공사할때 참고해서 적용해볼게요!^^

    • 2018.05.10 22:34 신고

      요즘은 PC보다 모바일 유입이 많아졌고
      어차피 디자인적인 부분은 모바일에서
      보이지 않는 부분이니 큰 신경을 쓰지
      않아도 되지만, 폰트는 글을 읽을때 바로
      나타나는거라 제일 중요한 것 같더라고요 ^^

      이게 스킨마다 추가로 적용시켜줘야하는 부분이 있을지 모르는데
      이대로 적용해보시고 혹시나 안되면
      말씀해주세요~

      직접 그 스킨으로 실험해보겠습니다 ^^

    • 2018.05.12 12:10 신고

      적용했어요!! 완전 마음에 들어용 ><ㅎㅎㅎ 블로그 완전 초본데도 쉽게 잘 따라했어요ㅎㅎㅎ폰트 바꿔서 기분 좋아졌어요!!
      감사합니당~

  • 2018.05.10 23:16 신고

    블로그 글씨 가독성도 좋고 참 좋네요.
    이 폰트 맘에 드네요~^^

    • 2018.05.12 20:39 신고

      ㅎㅎ 읽기 편하시다니 다행입니다
      잉여님도 시간 되실때 한번 적용해보세요~

  • 2018.05.11 08:01 신고

    폰트를 바꾸고 싶으신 분들게 아주 좋은 정보네요.
    저도 예전에 다른 스킨 사용할 때 폰트 바꾸고 싶어 여기저기 검색해서 해보는 등 애썼는데 생각만큼 잘 되지 않았던 기억이 나요ㅠ
    물론 제가 뭘 너무 몰라서 그런거였을지 모르지만요ㅋㅋ

    • 2018.05.12 20:41 신고

      티스토리도 스킨에 따라 본고딕이 기본적으로 들어가 있는 스킨도 있던데

      제가 사용하는 스킨은 본고딕 파일을 아예 찾야해서 애먹었네요 ㅜㅜ

      스킨은 한번 건드릴때마다 힘든거 같아요. ㅎㅎ

  • 2018.05.11 11:11 신고

    와우! 이 정보 완전 꿀팁이예요!
    이제 하스텐님 블로그 폰트 곧 변경되는건가요~~?? ㅎㅎㅎ

    • 2018.05.12 20:42 신고

      지금이 변경된 모습 입니다!
      개인적으로는 나눔고딕보다 이게 더 깔끔해 보이는거 같아요. ㅎㅎ

  • 힘들다
    2018.05.29 15:51

    ㅠㅠ왜 안될까요 이렇게 자세한설명을 해주셨는데....한시간째 쩔쩔매고있습니다ㅜㅜ

    • 2018.05.29 16:48 신고

      어떤 스킨 사용중이신가요?

    • 2018.05.29 16:51

      비밀댓글입니다

    • 2018.05.29 16:52 신고

      기본 폰트를 아예 변경하는거라 '본고딕'폰트 선택이 나타나지 않고 자동으로 적용됩니다.

    • 2018.05.29 16:54

      비밀댓글입니다

    • 2018.05.29 17:00

      비밀댓글입니다

    • 2018.05.29 17:06

      비밀댓글입니다

  • 2019.05.11 20:23 신고

    되게 깔끔하게 정리하셨네요
    덕분에 어려움 없이 적용했습니다
    감사합니다 :)

Designed by JB FACTORY