[CSS]맥에서 간단하게 맑은 고딕 웹폰트 사용하는 방법

 

안녕하세요 무택입니다 :)

오늘은 MS기본 폰트인 맑은 고딕을 맥에서 웹폰트로 사용하는 방법을 알아보겠습니다. 우선 맑은 고딕은 MS 기본 폰트로 윈도우를 사용하시는 분들은 가장 익숙한 폰트일 수 있습니다. 하지만 윈도우에서 사용되는 폰트이기 때문에 맥에서 폰트를 보여주기 위해서는 글꼴 파일 작업이 필요합니다. 그 방법을 아래에서 자세하게 설명해 보도록 하겠습니다.

 

 

---

같이 보면 좋은 포스팅

[CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기

[CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기

 

 

 

맥에서 폰트 작업을 추가로 해야 하는 이유

우리가 웹사이트에 접속하면 텍스트를 보여주게 되는데 css에서 폰트를 지정하지 않으면 OS상의 기본 폰트로 보여지게 됩니다. OS상의 기본 폰트는 기본적으로 설치되어 있기 때문에 css에서 따로 지정을 하지 않아도 볼 수 있습니다.

 

하지만 맥에는 맑은 고딕 폰트가 없기 때문에 폰트 작업을 해줘야 맥에서도 방문자들이 맑은 고딕 폰트를 볼 수 있습니다. 그러기 위해서는 서버에 폰트 파일을 업로드해서 CSS작업을 해주는 방법이 있는데 오늘 알아볼 내용이 바로 이 내용입니다.

 

 

 

맑은 고딕 파일

우선 폰트 파일은 기본적으로 TTF, OTF 파일이 있는데 이 파일을 웹폰트용 파일로 변환시켜 주는 작업이 필요합니다. 상단에 글을 참고해서 직접 파일을 변환시켜 작업할 수도 있고 아래 제가 올려놓은 파일을 사용하셔도 됩니다.

malgun.zip

5.24MB

 

*24.6.11 용량 축소 후 파일 재등록했습니다.

웹폰트용으로 변환된 파일을 준비했다면 서버에 업로드를 해줘야 합니다. 파일질라를 이용하거나 기타 FTP 프로그램을 사용해 원하는 폴더에 폰트 파일을 넣어줍니다.

 

 

 

폰트 적용 방법

폰트를 서버에 넣어줬다면 아래 코드를 CSS에 넣어주도록 합니다.

@font-face {
    font-family: 'Malgun Gothic';
    src: url('url/test/malgunsl.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'Malgun Gothic';
    src: url(' url/malgun.woff') format('woff');
    font-weight: 500;
}
@font-face {
    font-family: 'Malgun Gothic';
    src: url(' url/malgunbd.woff') format('woff');
    font-weight: 700;
}

여기서 `font-family`에는 본인이 사용할 폰트 이름을 지정해 줍니다. 그 후 아래처럼 CSS를 작성해 주면 맥에서도 맑은 고딕을 출력할 수 있게 됩니다.

span { font-family: 'Malgun Gothic'; }

 

 

여기까지 맥에서 맑은 고딕을 사용하는 방법에 대한 포스팅이었습니다. 오늘 포스팅에서 중요한 점은 폰트 파일을 서버에 넣고 `@font-face`작업을 해주면 어느 OS에서도 작업한 폰트를 보여줄 수 있다는 점이었습니다.