맥 사파리 폰트 설정하기 - 나눔 고딕 CSS 파일 만들기 및 응용

현재 사용하고 있는 Mac OS X 버전: OS X Mountain Lion 10.8.5

 

Mac OS X을 사용하시는 분 중 웹브라우저 응용프로그램으로 '사파리'를 사용하시는 분이 많으실텐데,

 

기본적으로 사파리에서 네이버 사이트를 웹서핑하시다보면 대부분의 글꼴들이 '명조체'로 되어 있어서... 웬지 어색함??을

 

느끼실 거에요... 영어는 명조체와 같이 날카로운 폰트가 선호되지만, 한글은 어느 정도 동글동글해야 글씨가 이쁘잖아요 ^_^

 

  

Mountain Lion 운영체제부터, 사파리의 폰트는 CSS 파일을 이용해서 변경이 가능해졌습니다.

 

1. 사파리 환경설정 ( CMD + , ) 을 켜신 후, 

2. '고급' 탭을 클릭하신 후, 

3. '스타일 시트' 탭에서 '기타...'를 눌러 CSS 파일을 추가하면 됩니다.

그러면 그 CSS 파일은 어디있냐구요? 뭐.. 제가 첨부해드려도 되지만, 간단하게 직접 만들어보는것도 재밌지 않을까요?

 

실제로, 나눔 고딕을 적용할 수 있는 CSS 파일의 내용은 다음과 같습니다. 이것을 그대로 메모장에 적고

 

확장자만 .css 로 바꿔주면 너무나 간단하게 CSS 파일을 만들 수 있다는 사실!!!

* { 
font-family: lucida grande, 나눔고딕, NanumGothic !important; line-height: 1.4em;
}

설명을 하자면, lucida grande 를 기본 폰트로 하되, 

사용할 수 없는 경우(예를 들면 한글..), 나눔 고딕 체를 사용하라는 뜻입니다.

 

 

 

자, 조금 더 응용을 해보도록 합시다.

 

저 글 그대로 복사해서 CSS 파일 만드신 후 추가하면, 사파리의 모든 글들이 '나눔고딕'으로 바꿔있음을 아실 수 있어요.

 

그런데, 영어는 날카로운 명조체로, 한글은 나눔고딕체로 사용하고 싶을 수도 있지 않을까요?

 

상황에 따라서 다른 폰트를 쓰고 싶을 때는 어떻게 할까요?

 

제가 사용하는 CSS 파일의 내용을 소개하겠습니다.

@font-face {
    font-family: "돋움";
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: Dotum;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: DotumChe;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: "굴림";
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: Gulim;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: GulimChe;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}
@font-face {
    font-family: AppleGothic;
    src: local("Apple SD Gothic Neo"),
    local("Nanum Gothic");
}

이 CSS 파일을 설명하자면, 돋움, 돋움체, 굴림, 굴림체, AppleGothic 체 등에 대해서,

 

Apple SD Gothic Neo체, 사용하지 못할 경우는 나눔 고딕체를 사용하라는 의미입니다.

 

 

 

일반적으로, 영어를 사용하는 외국 사이트에서는 돋움체와 같은 폰트를 사용하지 않으므로

 

영향을 받지 않고 한글을 사용하는 사이트에 대해서만 나눔고딕/ Apple SD Gothic Neo 체를 사용하실 수 있는 겁니다. :)

 

 

이제 제가 사용하는 CSS 파일들을 보면 대충 눈치 빠른 분은 어떻게 응용하실지 알겁니다.

@font-face {

font-family: [바꿀 폰트];

src: local("[바꾸고 싶은 폰트]");

}

 

와 같은 형태로 CSS 파일을 만들어주시면 되는겁니다. ^_^

 

 

그럼 이제 스스로 CSS 파일을 만들어서 사파리 어플리케이션 의 가독성을 늘려보도록 합시다!!!

여기까지, "맥 사파리  폰트 설정하기 - 나눔 고딕 CSS 파일 만들기 및 응용" 포스팅이었습니다. 감사합니다.