테크정보 > 블로그나 홈페이지에 원하는 웹 폰트를 무료로 사용하기

테크정보

블로그나 홈페이지에 원하는 웹 폰트를 무료로 사용하기

웹폰트눈누cdnGmarketSans

팁 2024.04.08 52 회 읽음

팁 24.04.08 52

설치하여 사용하는 설치형 블로그 워드프레스나 홈페이지의 경우 기본 폰트를 사용하는 경우 글씨의 가독성이 떨어지고 고급스럽지 않은 경우가 있습니다.

이런 경우 웹 폰트를 이용하여 원하는 글씨를 사용할 수 있는 방법을 소개 하려고 합니다.

웹 서버에 폰트를 다운 받아 사용하는 방법도 있지만 트래픽을 줄이고 공개된 CDN 을 이용하여 사용하는 방법을 안내 드립니다.

웹 폰트를 제공하는 서비스로는 눈누라는 사이트가 가장 편리 합니다.

여기에서는 Gmarket Sans 폰트를 사용하는 방법을 알려드립니다.

https://noonnu.cc/

1. 홈페이지에 접속하여 폰트를 검색합니다.

많은 글씨체가 있으므로 추천하는 폰트나 알고 있는 이름을 검색하여 찾을 수 있으며 예쁜 폰트만 찾는다면 가독성이 떨어지는 단점이 있기에 전체 폰트나 부분 폰트를 사용할 때 주의가 필요합니다.

2. 폰트를 선택합니다.

폰트를 클릭하면 폰트에 대한 굵기에 대한 미리보기를 볼 수 있으면 웹 폰트를 사용할 수 있는 스타일 시트를 제공하고 있습니다.

해당 스크립트를 복사하여 홈페이지의 <head></head> 사이에 복사하여 붙여 넣기를 합니다.

여기에서 중요한 것은 실제 사용되는 폰트 이름을 GmarketSansMedium 이라는 것을 기억 해 두세요.

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

3. 폰트 저작권 확인하기

해당 페이지 아래에 보면 라이선스 본문과 라이선스 요약 표가 있습니다. 폰트 저작권을 지키지 않는 경우 생기는 불상사가 발생하지 않도록 확인하는 게 좋습니다.

대부분 웹 폰트의 경우 웹사이트에서만 사용하는 경우가 많으므로 크게 제약이 되지는 않습니다.

4. 나의 웹사이트에 폰트를 바꾸기

위에서 스타일 시트 스크립트를 복사하여 head 본문에 삽입하고 나서 해당 폰트를 사용하는 작업을 안내 해 드립니다.

아래와 같이 body span p div 등 모든 테그에 폰트를 지정할 수 있습니다.

또는 h1 h2 h3 h4 h5 h6 타이틀 부분만 별도의 폰트를 지정하는 것도 가능합니다.

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body,span,p,div,ul,ol,dl,dt,dd,em,input,textarea,fieldset,small,tr,td,th,source {
    font-family : 'GmarketSansMedium', sans-serif;
    font-weight : normal;
}
h1,h2,h3,h4,h5,h6 {
    font-family : 'GmarketSansMedium', sans-serif;
    font-weight : normal;
}

웹 폰트를 찾아서 내가 운영하는 사이트에서 쉽게 적용하는 방법에 대해서 소개 해 드렸습니다.

폰트를 많이 사용하면 좋지만 그만큼 사이트 로딩 속도가 느려질 수 있기에 1~3개 정도가 적당하며 저의 경우에는 1개만 사용하고 있습니다.

무료로 제공하는 링크를 이용하기에 트래픽 걱정이 없지만 해당 서비스가 느려지면 홈페이지가 느려지는 단점이 있습니다. 이런 경우에는 홈페이지에 해당 폰트를 다운 받아 설치하고 경로를 운영하는 사이트로 변경하여 사용하기도 합니다.