FastBoot 반응형스킨 본문 글꼴(폰트/글씨체) 변경 방법


저번시간에는 본문의 글자 크기를 변경하는 방법에 대해서 알아보았다. 이번에는 글꼴 (폰트, 글씨체) 를 변경해보는 방법을 알아보도록 하겠다.

어렵지 않다. 프로그래밍을 거의 모르는 필자도 해냈으니 여러분들은 당연히! 무조건 해낼 수 있게 되어있다. 그냥 따라만 하면 된다. 자! 도전해보자!


피가되고 살이되는 블로그,

친절한효자손의 취미생활!

글, 사진 및 이미지 ▶ CopyLeft(C) 유길용

#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#




FastBoot 반응형스킨 본문 글꼴(폰트/글씨체) 변경 방법


우선, FastBoot 본문 글자크기편을 모르고 오셨다면, 한번 봐두면 도움이 되므로 아래의 관련글을 참조하도록 한다.


●관련글1 : FastBoot 반응형스킨 본문 글자크기 변경방법



그리고, 글꼴변경에 대한 관련글도 보셔야 이해가 확실히 되므로, 좀 귀찮더라도 아래의 관련글도 같이 참조하도록 한다.


●관련글2 : 티스토리 기본글꼴 변경방법



이제 다 읽었다면 편하게 따라만 하면 된다. 관련글2가 무척 중요하니 거기 나와있는대로 우선 첨부파일의 나눔고딕 글꼴도 다운받아 똑같이 업로드까지 해줘야 한다.




FastBoot에도 마찬가지로, @font-face 이 태그를 @charset 앞에 붙여넣어준다. (관련글2 참조)




그리고 Ctrl + F를 해서 font-family 를 검색하면 재법 많이 검색이 되겠지만, 우리가 수정해줘야 할 부분은 딱 두곳 밖에 없다. 첫번째는 바로 저 부분이다. @charset 이 있는 부분이다.


관련글2에 있는 첨부파일안의 저 부분을 그대로 추가해서 붙여넣어주자. 주의할점은 큰 따옴표, 그리고 쉼표 이다.




나머지 한곳은, 244행에 위치해 있는 저 부분이다. 방법은 위와 동일하다.

이게 끝이다. 그리고 저장을 눌러 새로고침을 해본다. 변화가 느껴지는가??




이렇게 나눔고딕이 적용이 되었다. 깔끔하게 말이다. 전과 비교했을 때 확실히 달라졌음을 느낄 수 있다.


이제 FastBoot을 재법 세련되게 쓰게 되었다. 아직도 갈길이 많이 남았다. 애드센스도 좀 새롭게 적용시켜야 하는데 아직 기본밖에 못하고있다. 이걸 완벽히 적용되게 만드는 순간! 이제 메인 블로그도 당장 적용시킬 생각이다. 빨리 그날이 오길 바라며...쩜쩜쩜... <ㄲ>



"친절한효자손 취미생활" 을 검색!


기어베스트 앱

이 글을 공유하기

댓글(15)

  • 2017.01.30 16:24 신고

    질문있습니당~

    NanumGothic, "맑은 고딕", Malgun Gothic, "나눔 고딕"

    을 추가하라고 하셧는데 왜

    NanumGothic, "나눔 고딕", Malgun Gothic, "맑은 고딕" 이 아니고
    순서가 저렇게 되나요?

    제 생각에는 nanum, 나눔, malgun, 맑은 순서대로 되야할것같은데
    순서가 바뀌어도 상관없는건가요?

    • 2017.01.30 17:03 신고

      아, 구름님께서 말씀하신게 맞아요. ㅎㅎ 수정해야하겠군요. 가장 처음것을 먼저 인식하고, 만약 처음 글꼴이 없다면, 다음 글꼴을 인식하는 순서가 되지요.

    • 2017.01.30 17:08 신고

      오 포인트는 젤처음의 'nanumgothic'이군요. 호오..! 감사합니다^^* 저 친효님 블로그 체류시간엄청나네욬ㅋㅋㅋㅋ

      상세하고 자세히 적혀있어서 너무 좋아요!


      아까 댓으로달았던 문제점근..결국 리셋하고 첨부터 다시하는중이애요 차근차근...문제가많더라구용 제가뭔가실수했는지

      한카테고리 안의 3개글이있다면, 그 3개글이 순서대로 본문이펼쳐진상태로 로딩이되는데
      젤첨에뜨는 본문글하단에 애드센스반응형 디스플레이광고 3개가 주루룩 연달아붙어뜨더라구요.

      그럼 두번째 글 본문하단, 세번째 글 본문하단에는 하단광고가없구요. 거참...ㅋㅋ

      본문하단의 광고들이 뭉쳐서 첫번째 글 하단에 3개가 모여서 나오더라구욫


      해결방법을 도저히못찾아서 결국리셋햇습니다
      다시차근차근 친효님 글보고 해보려구요^^*

    • 2017.01.30 17:23 신고

      감사합니다. 차근차근 다시 해보시면 아마 잘 되실 겁니다.ㅎ

  • 2017.04.25 01:30 신고

    제 컴퓨터가 이상한건지 효자손님 블로그도 그렇고 익스플로러에서는 제대로 변경되어 보이는 것 같은데, 크롬에서는 변경이 되지 않는 것 같습니다. 원래 그런건가요?

  • 2017.05.14 05:53 신고

    이렇게 한번 설정하고 나면 전체 글들이 다 자동으로 나눔고딕으로 설정되는건가요?? 제가 나눔고딕 모양을 잘 몰라서 혹시 제 글들 나눔 고딕 적용 되었는지 확인 해주시면 정말 감사드리겠습니다..ㅜ
    글쓰기 들어가서 폰트 고르는 곳에는 나눔고딕이 없는데 그냥 쓰고 아무런 체로 올려도 나눔고딕이 되는거겠죠??
    그리고 혹시 나눔고딕 뒤에 맑은 고딕은 왜 써있는건지 여쭤볼 수 있을까요?

    • 2017.06.13 15:00 신고

      안녕하세요, ,답글이 늦어져 죄송합니다. 확인해보니 본문은 적용 된 것 같은데, 나머지는 아닌 것 같습니다.

    • 2017.06.13 15:06 신고

      아 그니까 글 제목이나 카테고리에 있는 글들은 안됐다는 말씀이시죠??

      본문이라도 적용됐으면 그래도 다행이네요ㅜㅜ 감사합니다!

  • 2017.06.13 14:29 신고

    효자손님, 항상 잘 보고 있습니다. 그런데, 말씀하신대로 적용하면 나눔 고딕 체가 아니라 맑은 고딕체로 적용됩니다. 저도 직접 HTML을 만져가면서 확인해봤는데요. 그리고 지금 효자손님 블로그도 맑은 고딕체인거 같은데요. 혹시 일부러 바꾸신건가요? 나눔고딕체는 좀 더 부드러운 느낌인데, ㅎㅎ 잘모르겠네요.

    • 2017.06.13 15:02 신고

      안녕하세요, 제가 맑은 고딕체를 잘 몰라서 뭐라고 비교할 수는 없겠지만, 나눔고딕체는 네이버카페에서도 자주 써서 잘 알고 있어요. 이건 나눔 고딕체 맞습니다.
      그리고 사용하는 브라우저에 따라 차이가 있습니다. 저는 크롬을 사용하고 있구요, 스마트폰에서 볼때도 차이가 있을 수 있어요.

    • 2017.06.13 15:30 신고

      저도 크롬을 사용중입니다. 제가 착간한걸지도 모르겠네요. 그런데 효자손님이 예시로 캡쳐해쥬신 글씨체랑 본문 글씨체랑 다르게 보이거든요. 저고 효자손님 따라서 해서 같은 글씨체고요. 결정적으로 html 에서 맑은 고딕을 지우면 fastboot 기본 글씨체로 돌아가지만 나눔고딕은 지워도 변경 없더라구요. 혹여나 제가 오해한 것이라면 양해부탁드립니다 ^^;

    • 2017.06.13 15:37 신고

      음...이건 확인할 길이 없으니...뭐라 답변드리기가 애매하네요~ 여튼! 제 블로그에선 나눔고딕 맞습니다~!ㅎ

Designed by JB FACTORY