안녕하세요! 사진찍는 꿈작가 앨리손입니다~


이번 시간에는 티스토리 블로그 폰트(글꼴)를 원하는 부분만 변경, 바꾸는 방법에 대해서 알아보도록 하겠습니다. WHATEVER 반응형 스킨의  ① 블로그 이름(타이틀) 폰트 변경하는 방법 과  ② 글 더보기 글자에 마우스를 올렸을 때 바뀌는 색상 변경 에 대한 댓글 문의가 있었어요. 


우선 제가 사용하고 있는 WHATEVER 스킨 기준으로 설명드릴게요. 어떤 스킨을 사용하든 같은 방법을 적용하면 원하는 부분 폰트, 글꼴 수정은 어렵지 않게 하실 수 있습니다. 보통 블로그 전체 글꼴, 폰트 수정은 기본적으로 많이 하시죠. 저도 많은 분들이 사용하시는 나눔 고딕(Nanum Gothic)으로 변경하여 사용 중인데요.


블로그 이름(블로그명, 타이틀)이나 본문 제목 등 원하는 부분마다 다르게 글꼴 적용을 하고 싶을 때가 있어요. 방법도 간단합니다. 우선 원하는 글꼴 폰트를 찾아야겠죠. 구글 폰트 사이트에서 원하는 폰트를 선택하면 코드가 생성이 됩니다. 그 코드를 스킨 편집에서 HTML, CSS 해당 위치에 삽입만 해주면 끝이에요. 참 간단하죠?





WHATEVER 스킨은 상단에 메뉴바(상단 메뉴, 상단 바, 헤더, HEADER) 좌측에 블로그 이름이 들어갑니다. 제 블로그 네임인 앨리's Room 폰트는 기본 글꼴로 설정한 나눔 고딕이었고, 색상과 크기만 수정해서 사용하고 있었습니다. 



customizing, WHATEVER 스킨, 반응형 스킨, 반응형 웹스킨, 블로그, 블로그 스킨, 커스터마이징, 코딩, 티스토리, 티스토리 whatever 스킨 



위 이미지는 블로그명을 다른 폰트로 수정한 상태인데요. 구글 폰트에서 찾은 Gamja Flower입니다. 타이틀로 쓰기에 그다지 적합한 폰트는 아니라고 생각하지만, 동글동글하니 귀여운 느낌이 제 블로그명과 잘 어울려서 설정해 봤어요. 그럼 원하는 폰트를 찾으러 구글 폰트 사이트로 이동해 보겠습니다. 


 Google Fonts ▶ https://fonts.google.com/ 





우측 언어(Languages)를 보면 전체 언어(All Languages)로 기본 설정되어 있습니다. 변경할 부분의 글자가 한글로 되어 있다면, 언어 설정을 한국어(Korean)로 바꿔주세요. 25종의 한글 폰트를 지원하고 있습니다.





+버튼을 클릭하면 원하는 폰트가 선택되고, 선택된 글꼴은 -로 바뀝니다. 저는 Gamja Flower 하나만 선택했는데, 여러 개 선택도 가능합니다. 하단의 블랙박스에 선택된 폰트 숫자 (1 Family Selected)를 확인하실 수 있어요. 그 부분을 클릭하면 스킨에 삽입할 코드를 확인할 수 있습니다. 



티스토리 반응형 스킨, 티스토리 스킨, 티스토리 스킨 수정, 글꼴 변경, 글꼴 수정, 폰트 수정, 폰트 변경, 구글 폰트,  Google Fonts



우측 상단에 다운로드 표시를 클릭하면, PC에 바로 저장도 가능합니다. 색깔 박스 표시된 두 코드를 복사하여 스킨의 HTML, CSS 해당 위치에 각각 삽입해 주겠습니다. 그런데 이 코드를 그대로 사용할 경우 크롬(Chrome)에서는 폰트가 정상적으로 보이지만, 인터넷 익스플로러에서는 폰트가 정상적으로 보이지 않아요.


인터넷 익스플로러에서도 폰트가 정상 출력하기 위해 &subset=korean 을 첫 번째 코트 중간에 넣어주겠습니다. 


<link href="https://fonts.googleapis.com/css?family=Gamja+Flower&display=swap&subset=korean" rel="stylesheet"> 


이 코드를 복사(Ctrl+C) 해서 블로그 관리 홈으로 이동합니다.





블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > HTML에서 헤드 사이에 붙여 넣어(Ctrl+V) 줍니다. <head>와 </head> 사이 편한 곳에 삽입 후 적용 클릭합니다.





그다음 구글 폰트로 다시 가서 두 번째 코드를 복사해 옵니다. 


font-family: 'Gamja Flower', cursive; 


블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS에서 블로그 이름에 해당되는 위치에 삽입해 주겠습니다. 제가 사용하는 WHATEVER 스킨의 경우는 107번째 줄 #header h1 a를 찾으시면(Ctrl+F) 됩니다. 


font-family가 이미 있다면 원하는 폰트로 수정하면 되고, 없는 경우는 그대로 붙여넣기하면 되겠습니다. 사이즈가 작아서 font-size:1.5em; 추가하여 크기를 좀 더 크게 수정했어요. 마지막에 적용 클릭합니다. 


블로그명, 타이틀이 원하는 폰트로 수정된 걸 확인하실 수 있습니다. 크롬과 인터넷 익스플로러, 모바일 버전으로 모두 확인해 보시길 바랍니다. 글 "더보기" 글자에서 마우스를 올렸을 때 바뀌는 색상 변경은 다음 글에서 바로 설명드리겠습니다. 


읽어주셔서 감사합니다 ♥♥♥


※ 제 블로그의 필요하신 글은 어디든 공유하셔도 좋습니다. 다만, 저작자 표시 ( 저작자 이름과 출처 표시, 링크 표시 ), 2차 변경 금지를 꼭 지켜주세요. 불펌은 금지!! 퍼가실 때는 댓글 남겨주세요. 티스토리 댓글과 공감은 로그인이 필요 없습니다. 로그인하시면 구독이 가능합니다. 양질의 유용한 콘텐츠를 발행하기 위해 계속 노력하겠습니다. 감사합니다.^^  - AllySon

  1. Favicon of https://zyounglee.tistory.com BlogIcon the forest. 2019.06.01 22:41 신고

    아휴 능력자! 포스팅도 어쩜 이렇게 꼼꼼하게 하셨는지,, 정말 감사합니다 앨리님 ^^

    • 도움이 되셔서 저도 기쁘고,
      포스팅하는 보람을 느낍니다~~
      댓글 감사합니다 clairelee님^^
      주말 남은 시간도 편안하세요~

  2. Favicon of https://page4.tistory.com BlogIcon ⋆✩⋆ 2019.06.04 01:07 신고

    애드센스 승인 받고 광고도 넣어봤지만 뭔가... 정말 모르겠어요 ㅠㅠ 블로그는 처음이라 어렵고.. 승인 받고 행복은 잠시.. 포스팅도 해야하는데 .. ㅠ 저도 앨리님처럼 꾸미고 싶어요. 같은 스킨인데 너무 달라요 ..도움되는 글 계속 보고있어요.감사합니다! 구독했어요!^^*

    • 감사합니다 MyMoon26님^^
      우선 애드센스 승인 축하드립니다~
      네 맞아요~ 승인되면 뭔가 다 된것 같지만,
      그때부터가 진짜 시작이죠~
      공부, 연구할 게 정말 많아요 끝이 없어요!
      원하는 방향으로 잘 만들어가시길 바랄게요^^

  3. Favicon of https://imaesblog.tistory.com BlogIcon Cacka IMae 2020.02.25 11:07 신고

    바퀴의 블로그Software Hardware Game Technology

    https://roachsblog.tistory.com/
    어떤폰트 알고싶어용 알려주세용 ㅎ

    • Cacka IMae님, 반갑습니다!
      본문에 폰트 이름이 다 있는데,
      저한테 질문하신 건 아니죠?^^
      알고 싶은 폰트를 알려달라는 뜻인가요? ㅎㅎ
      편안한 밤 되세요 :)

  4. Favicon of https://lavitanuova.tistory.com BlogIcon 우생 2020.03.19 14:52 신고

    고맙습니다. 덕분에 쉽게 할 수 있었어요 : )

  5. Favicon of https://egg-in-london.tistory.com BlogIcon Egg_0914 2020.03.27 00:45 신고

    모바일 폰트 바꾸는거 몰라서 헤맸는데
    덕분에 잘 바꿨어요 감사합니다!!!^^

+ Recent posts