요즘 스킨을 새로 바꾸다 보니 폰트와 관련한 여러 문제점들이 다시 발생했다. 특히 티스토리에 과거에 작성해 놓은 글들이 글씨 크기 제각각이고 글씨 종류도 다 다르게 보인다. 지난 글들을 우연히 찾아 보게 되었는데 폰트가 제각각이라 보기가 너무 불편하다. 완전 뒤죽박죽 엉망진창이 되어 버렸다. 특별히 이유는 모르겠지만 중간에 글수정을 하면 폰트가 제멋대로 초기화 되거나 바뀌는 모양이다. 그렇다고 일일이 뒤틀린 글을 찾아서 폰트 스타일을 수정할수도 없는 노릇이고..

그래서 스킨의 CSS 에 아래 문구를 추가했다. 폰트 크기와 종류를 강제로 설정해 놓았다. 이 스킨에서는 본문이 post-content 항목으로 지정되어 있던데 어떤 스킨의 경우 entry 혹은 article로 되어 있기도 하다. 스킨마다 사용되는 구문이 약간씩 다르므로 .. 맞춰서 쓰면 될듯 하다. 다양한 응용도 가능하고 말야;;

속이 다 시원하다.

이거 은근히 본인 블로그에 폰트 문제가 있는지 모르는 경우가 많다. 왜냐.. 본인 컴퓨터 화면에서만 아무 불편함 없이 원하는 폰트로 잘 나오니까.. 나도 그랬다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* _entry-content */
.post-content {
    position: relative;
    line-height: 1.6 !important;
    word-break: break-all;
    text-align: justify;
    font-weight: inherit; 
    font-size: 17px;
    }
.post-content span[style*=font-size] { 
    font-size: 17px !important; 
    }
 
.post-content span[style*=font-family] { 
    font-family: "NSK", 'cczicon', sans-serif !important; 
    }
@media (min-width: 992px) {
.post-content {
    word-break: normal; 
    font-family: "NSK", 'cczicon', sans-serif !important; 
    font-size: 17px !important;
    }
.post-content span[style*=font-size] {
    font-size: 17px !important; 
    } 
}
@media (min-width: 1281px) {
.post-content {
    font-size: 18px !important;
    }    
.post-content span[style*=font-size] {
    font-size: 18px !important;
    } 
}


Before

After


댓글
  • 프로필사진 코코 오빠 능력자십니다. ㅋ 스킨 진짜 깔끔하니 멋집니다.
    며칠새 많은 변화가 생겼습니다. ㅎㅎ
    2016.01.06 23:35 신고
  • 프로필사진 SONYLOVE 조금씩 자꾸 고치고는 있는데 알아주시는 분이 계시니 감사합니다. ㅎㅎ
    근데 진정한 능력자는 저는 아니고 .. 스킨 만드신 분인거 같아요.
    이러다 스킨 바꿈질병 걸리면 다시 또 해야된다는;;;;
    2016.01.06 23:44 신고
  • 프로필사진 붉은대륙 스킨이 깔끔하게 바뀌셨네요~ 보기가 좋아요 예쁩니다 2016.01.08 12:42 신고
  • 프로필사진 SONYLOVE 저도 요즘 스킨중에 제일 맘에 들어요. ^^_
    행복한 오늘 되세요.. ^_^;
    2016.01.08 13:06 신고
  • 프로필사진 gon 흠... 본고딕 웹폰트을 받아서 블로그에 적용하려고 하는데...
    소니님 블로그에 있을 것이라고 생각했는데... 아쉽게도 없는 것 같네요... ㅎㅎ
    구글링 하러 갑니다. -0-;
    2016.03.13 20:16 신고
  • 프로필사진 SONYLOVE 제꺼 링크 걸어드릴까요? ㅎㅎ 2016.03.13 20:21 신고
  • 프로필사진 gon 포스팅하신거 있으신가요?
    그럼 답글로 걸어주시면 감사합니다. ㅎㅎ
    2016.03.13 20:23 신고
  • 프로필사진 SONYLOVE 그냥 파일만 새로 올려드릴게요. ㅎㅎ 2016.03.13 20:24 신고
  • 프로필사진 SONYLOVE 이 글 마지막 부분에 본고딕 파일과 사용법 올려놓았어요. 완전 성의없게 작성했으니 너무 노여워 마시길.. -.-; 2016.03.13 20:30 신고
  • 프로필사진 gon 제가 이해한게 맞는지 확인 해 주시면 감사하겠습니다.
    - 소니님은 Regular 타입만 사용하시는 것이죠?
    + Bold 등의 다른 서체(?) 타입(?)는 없는 것 같습니다.
    - 만약 다른 타입을 추가할 경우 접속할 때 다운 받는 것이구요?
    + 그래서 Regular만 설치하신 것 같은데 맞는지요?
    - 웹폰트로 설정할 경우 블로그 접속할때 다운받아서 사용하는 구조인가요?
    2016.03.13 20:39 신고
  • 프로필사진 gon 아.. 역시 웹폰트도 결국 다운로드이군요...
    블로그 느려질까 무서버서 설치하기 꺼러지네요... -0-;;;
    사용 방법까지 알려주셨는데... 테스트 해보고 적용할지 말지 고민해 보겠습니다.

    감사합니다.
    2016.03.13 20:43 신고
  • 프로필사진 SONYLOVE 네. 불필요하다 판단해서 최소화 한 모두 삭제된거에요. -.-;
    다른 웹사이트에서 불러오는 것보다 자체 스킨에서 불러오는게 빨라서 사용하는데.. 블로그 접속하면 다른 웹폰트처럼 폰트를 다운받지는 않는거 같아요.
    그리고 현재 기본 스킨 자체에도 웹폰트가 웹사이트를 통해 불러오고 있어요. 그건 굉장히 용량이 큰거 같아요. 그것때문에 느리다고 판단해서 기존꺼를 지우고 직접 넣은거에요.
    아마 바꾸시면 블로그 빨라지실거에요. ㅎㅎ
    2016.03.13 20:46 신고
  • 프로필사진 맏내 이거 글자색은 어떻게 바꾸나요?.? 2016.09.14 02:22 신고
  • 프로필사진 SONYLOVE 어느부분을 말씀 하시는건지요.
    이 글에 소스코딩부분을 말씀하시는거면 웹에서 자동으로 변환해주는 사이트를 이용한거고 현재는 스킨에 따로 컬러 하이라이터를 설치해서 사용중이에요.
    2016.09.14 10:25 신고
  • 프로필사진 맏내 ㅎㅎ 이런쪽으로는 잘몰라서 한참을 들여다봤네요! 드디어 본문이랑 댓글말씀하신걸 이해했답니다!! ㅎㅎㅎ감사합니다~
    소니러브님 추석잘보세요~
    2016.09.14 23:25 신고
  • 프로필사진 케빈아놀드 감사합니다. 소니님. ~
    그런데 혹시 한개 글자의 넓이를 늘리는 방법이 있나요? 음... 지금 폰트는 그냥 제 느낌에 세로로 길어보인다는 느낌을 받거든요.... 제가 너무 민감한건가요.

    혹시 글자폰트 옆으로 늘리는 코드도 있나요? 글자 사이 말고, 글자 자체요.
    2017.01.17 22:12 신고
  • 프로필사진 SONYLOVE 저도 letter-spacing 말고는 모르겠네요;; 2017.01.17 22:15 신고
  • 프로필사진 케빈아놀드 letter spacing 이라는 것이 글자 간의 간격을 조절하는 것이지요? 2017.01.17 22:16 신고
  • 프로필사진 SONYLOVE 네.. 글자 간격 조절하는건데 옆으로 늘리는건 아닐거에요;; 2017.01.17 22:20 신고
  • 프로필사진 케빈아놀드 넵 답글 감사합니답! 2017.01.17 22:32 신고
  • 프로필사진 연애코치 고수 나눔명조를 추가해서 하고 싶은데 어떻게 하는지 컴알못은 그저 답답하네요. ㅋㅋ 진짜 블로그 너무 멋지십니다. 이 스킨도 어디서 구할수없나요? 2017.02.01 23:00 신고
  • 프로필사진 SONYLOVE 폰트 추가하는 방법은 아주 간단해요. 특히나 나눔 명조는.. 구글 웹폰트를 제공하기 때문에 글자 몇개만 CSS 에 추가하면 바로 사용 가능합니다.
    폰트를 HTML 이나 CSS 에서 각각 하는 방법이 있지만 저는 주로 CSS 를 이용해서 사용합니다.

    스킨 꾸미기에서 HTML/CSS 편집모드에서 CSS 부분에 맨 위 상단에 아래 문구를 추가합니다.
    @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

    그리고 font-family 부분의 폰트명을 아래와 같이 나눔명조로 수정하시면 됩니다.
    font-family: 'Nanum Myeongjo';


    더 자세한 사항은 구글 웹폰트 아래 링크를 참고하세요.
    https://fonts.google.com/earlyaccess#Nanum+Myeongjo

    스킨은.. 저 혼자 쓰는거라 구할데는 아마도 없을듯..;;;
    2017.02.01 23:11 신고
  • 프로필사진 연애코치 고수 폰트 감사합니다. 적용해볼께요. 2017.02.02 02:29 신고
  • 프로필사진 박사랑 안녕하세요 글자 강제변환하는거요
    코드를 css에 넣으면 되는거에요?
    저위에 나와있는 코드를 제 css에서 마지막에 저걸 다 일일이 써서 넣으면
    블로그 전체 게시글 글자크기가 바뀌나요?

    제가 초보라서요;;;
    2017.03.03 13:37 신고
  • 프로필사진 SONYLOVE 위의 내용은 제 스킨에 해당하는 내용이고 스킨마다 본문 내용에 해당하는 클래스명이 다르니 클래스명을 찾아 내용을 교체하셔야해요. 추가하는게 아니라요. 2017.03.03 15:22 신고
  • 프로필사진 박사랑 우아우아 답변감사합니다
    죄송하지만 쌩초보라서요;;
    기본스킨 #1을 쓰고있어욤...
    ㅠ..ㅠ

    2017.03.03 15:44 신고
  • 프로필사진 SONYLOVE 제가 사용하는 스킨이 아니고 스킨의 내용이 복잡해서 어디를 수정해야 한다고 하기도 애매하네요. 2017.03.03 16:38 신고
  • 프로필사진 후니 안녕하세요^^
    블로그편 제일 뒷부분부터 천천히 읽으며 저도 공부좀 하려고 합니다.ㅎ
    소니님이 사용중이신 본고딕 글씨체 너무 맘에 드는데....저 위에 예제는 다른 폰트 예제 맞죠?
    본고딕은 어디서 다운받고, 또 경량화? 이런것도 해야하나요?
    2017.03.08 23:10 신고
  • 프로필사진 SONYLOVE 제가 사용하는 폰트는 본고딕이 맞아요.
    구글 웹폰트에 보시면 Noto sans KR 이라고 되어 있습니다.
    블로그에서는 구글웹폰트에서 불러오지 않고 스킨에 올려서 사용중이에요. 구글 웹폰트에서 불러오는게 느린거 같아서요. 경량 본고딕은 인터넷에 검색하시면 있을꺼에요. 저도 어딘가에서 다운받았거든요;;
    그리고 영문은 별도로 구글 웹폰트중에 모사랏?인가 하는 폰트를 사용중이에요.
    2017.03.08 23:14 신고
  • 프로필사진 후니 넵, 답변 감사합니다.
    항상 실시간 처럼 답변을 달아 주시니 컴퓨터 앞에 계속 앉아 계시는거 같네요^^
    열심히 구글링해서 찾아 보겠습니다.
    2017.03.08 23:23 신고
  • 프로필사진 SONYLOVE 컴퓨터가 이불 옆에 있어서 밤에는 컴퓨터를 안고 살아요;; 낮에는 답변 드리고 싶어도 못해드려요. ㅎㅎ 2017.03.08 23:24 신고
  • 프로필사진 후니 낮이지만 하나 더 여쭈어 보겠습니다.
    아침부터 계속 삽질하고 있어서ㅠ
    경량 본고딕을 찾았는데 종류가 넘 많네요.
    일단 regular.eot만 다운 받아서 올린 다음 설정을 하는데 소니님 글씨 사이즈랑 굵기를 똑같이 맞춰지지가 않네요. 뭐 다른것도 올려야 하나요?
    2017.03.09 14:34 신고
  • 프로필사진 SONYLOVE ㅎㅎ
    굳이 저와 똑같이 할 필요까지 있을까요.
    후니님 마음에 들면 되죠 뭐 ^_^
    실제 제 블로그에는 폰트크기가 해상도별로 다르게 설정되어 있어서 조금 복잡해요.
    2017.03.09 17:34 신고
  • 프로필사진 후니 ㅎㅎ여러 블로그를 다녀봐도 이곳이 제일 읽기가 편해요.
    절대 따라쟁이는 아니구요^^
    2017.03.09 18:56 신고
  • 프로필사진 SONYLOVE 본고딕 경량 버전도 여럿이 있나보네요.. 저도 몰랐는데;;
    현재 블로그의 본문 폰트 크기는 18px 로 설정되어 있어요.
    지금 보니 본문 글 그대로 설정 되어 있네요. ㅋㅋ
    2017.03.09 19:26 신고
  • 프로필사진 DJ AKDONG 가독성이 정말 좋네요.

    네이버에서 넘어와 작업을 하다보니 따라하는 것도 싶진 않네요. 복사를 해서 쓰는 방법은 아니라고 하시는데 어디를 손을 봐야할지 전혀 알수 없는데...방법을 알고 싶습니다.
    스킨은 같은 것을 사용하고 있습니다.
    2017.03.10 04:51 신고
  • 프로필사진 SONYLOVE 폰트 크기에 관한 설정은 본문 글에 있는 내용대로 지금도 사용중이에요.

    그리고 오래되어 기억이 가물가물하지만 사용중인 폰트인 본고딕은 스퀘어 스킨에 설치된 본고딕 폰트를 이곳에 가져와서 사용중인거 같아요.
    아닐수도 있습니다;;
    2017.03.10 09:31 신고
  • 프로필사진 Singlero 고맙습니다. 덕분에 뭣 모르고 style 들어간 포스트들 다 깔끔하게 정리 되었습니다. 2017.10.29 09:35 신고
  • 프로필사진 SONYLOVE 잘 되셨다니 다행이네요.
    근데 이건 임시적인 방편일뿐이고 결국 글을 처음 쓰는 단계에서부터 제멋대로 추가되는 스타일들을 정리해주는게 좋은것 같습니다.
    글이 많지 않다면 이전글들도 순차적으로 수정하는것도 좋고요.
    저도 지금은 초반의 글들 일부를 제외하고는 모두 수정하고 이 설정은 제거했어요.
    2017.10.29 09:47 신고
  • 프로필사진 Singlero 네. 아무래도 신규 발행하는 포스팅도 글자 크기가 강제 되어서
    궁극적으로는 일일이 다시 손을 보는 게 좋을 거 같습니다.

    그런데 안타까운 것이 티스토리에는 13짜리 폰트가 없다는 것이죠. ㅜㅜ

    네이버 블로그만 하다가,
    자유도가 높은 블로그를 하니 갈피를 못 잡겠어서 일단은 소니러브님 정보 덕에 찬찬히 둘러보면서
    컴퓨터와 스마트폰 둘다 보기 좋은 글 포맷을 만들어 보겠습니다.
    별 연관은 없지만, 저도 쏘니 사랑합니다. 휴대전화도 소니 엑스페리아 초기모델부터 쓰고 있어요.. ^^
    즐거운 주말 되세요.
    2017.10.29 09:52 신고
  • 프로필사진 SONYLOVE 13이란 어떤 단위의 크기인지는 모르겠지만 크기 나타내는 단위가 꽤 많아요.
    암튼 즐거운 블로그 되시길 바랍니다.
    저는 골프를 해본적도 없고 잘은 모르지만.. 요즘 골프스타라는 골프게임을 하고 있는데 재미있더라고요. ㅎㅎ
    편한 주말 되세요. ^^
    2017.10.29 10:05 신고
  • 프로필사진 施兒 블로그 포스팅 폰트가 이쁘네요 ㅋㅋ 혹 폰트가 먼지 알 수 있을까요? 2018.01.13 02:24 신고
  • 프로필사진 SONYLOVE 블로그에 사용된 폰트는 한글은 본고딕 Noto sans kr 이고 영문은 Monsarrat 을 사용중이에요. 2018.01.13 10:32 신고
  • 프로필사진 施兒 폰트의 가독성이 뛰어나 저도 바꿔볼까하는데
    다른 방식으로 코딩을 한건지.... font-family가 없네요 ㄷㄷㄷ
    2018.01.13 11:55 신고
  • 프로필사진 SONYLOVE 무슨 말씀인지 제가 잘 이해를 하지는 못했지만..
    폰트는 스킨의 html/css 에서 일괄적으로 하고 있어요.
    2018.01.13 12:33 신고
  • 프로필사진 施兒 저도 본고딕으로 적용 하려고 해보고 있는데요
    css안에서 뭘 고쳐야 하는지... 폰트패밀리도 없고
    post-content도 없고 entry도 없고 .. 제가 만든게 아니라
    티스토리에 스킨에 있는걸 적용한거거든요

    어캐 하다보니 야매[?]로 사이드바랑 티에디션은 적용된거 같은데
    본문을 일괄적으로 폰트 적용하는건 안되네요 ㅡㅡ
    2018.01.13 12:38 신고
  • 프로필사진 SONYLOVE 본문에 다른 폰트 설정이 되어 있어서 그럴지도...
    body, html 폰트 설정 마지막에 !important 를 추가해서 해보셔요.

    html, body {font-family:'Noto Sans KR', sans-serif !important; }
    2018.01.13 13:18 신고
  • 프로필사진 施兒 말씀하신대로 수정을 하였는데.. 안되네여 ㅡㅡ 어렵네요 2018.01.13 13:43 신고
  • 프로필사진 SONYLOVE 본문의 폰트들도 다 본고딕으로 보이는데요;; 2018.01.13 13:48 신고
  • 프로필사진 施兒 아... 제가 여쭤본거는 포스팅한 글 폰트요.. 티에디션화면이 아니라... 2018.01.13 13:55 신고
  • 프로필사진 SONYLOVE 이 글은 CCZ-CROSS 스킨을 기쥰으로 작성되어 있고 스킨마다 폰트 설정이 다르고 본문에 해당하는 클래스명이 달라서 ..
    스킨 제작자에게 문의하심이 좋을 듯 하네요.
    2018.01.13 15:30 신고
  • 프로필사진 施兒 넵.. 감사합니다 ^^.. 자꾸 여쭤봐서 죄송합니당 2018.01.13 16:19 신고
  • 프로필사진 SONYLOVE 죄송합니다.
    제가 도와드릴 정도를 넘어선거 같아요.
    성공하시길 바랍니다.
    2018.01.13 16:40 신고
  • 프로필사진 施兒 아.. 제가 지금 포스팅 작업을 했는데요
    새롭게 쓰는 포스팅은 글꼴이 적용 되는 모습인데.. 전에 써놓은건 안 바뀌는 문제네요 ㅡ ㅜ
    2018.01.13 18:30 신고
  • 프로필사진 SONYLOVE 기존의 글은 HTML 모드로 글에 적용된 폰트를 제거해 하나씩 수정하시거나 그냥 두심이..
    저도 오래전 글들중 다른 폰트가 적용된 글들을 방치하고 있어요.

    강제로 모든 폰트를 일괄 적용하는게 잠시는 좋을지 몰라도 나중에 새로 작성하는 글들도 모두 강제로 적용되므로 그리 권하지는 않습니다.
    2018.01.13 22:36 신고
댓글쓰기 폼