페이지 선택

디지털노마트 지식나눔!

함께 해요! 디지털노마드!

인기 검색어 wpform
View Categories

웹폰트 무료사이트! 워드프레스에서 웹폰트 사용법!

학습 소요 시간: 3 분 소요

문서 목차

웹 폰트 확장자 소개 #

웹폰트는 다양한 브라우저와 플랫폼에서 텍스트를 올바르게 표시하기 위해 여러 확장자로 제공됩니다. 주요 웹폰트 확장자는 다음과 같습니다:

  1. WOFF (Web Open Font Format): 웹 브라우저에서 가장 널리 사용되는 포맷입니다. 압축된 형태로, 빠른 로딩 속도를 제공합니다. WOFF2는 WOFF의 개선된 버전으로 더 높은 압축률을 제공합니다.
  2. TTF (TrueType Font): Apple과 Microsoft에서 개발한 폰트 형식입니다. 브라우저 지원이 상대적으로 넓지만, 압축이 덜 되어 있어 로딩 속도가 느릴 수 있습니다.
  3. OTF (OpenType Font): TTF의 확장 버전으로, 더 많은 서체 기능과 특수 문자를 지원합니다. 현대적인 브라우저에서 널리 지원됩니다.
  4. EOT (Embedded OpenType): Microsoft에서 개발한 포맷으로, 주로 Internet Explorer에서 사용됩니다. 최신 브라우저에서는 잘 사용되지 않습니다.
  5. SVG (Scalable Vector Graphics): 벡터 이미지로 폰트를 표시하는 형식입니다. 주로 구형 iOS 브라우저에서 사용되었습니다. 현재는 거의 사용되지 않습니다.

웹 프로젝트에서는 브라우저 호환성을 위해 다양한 확장자를 함께 제공하는 것이 일반적입니다. 예를 들어, WOFF, WOFF2, TTF 파일을 모두 포함하여 다양한 환경에서 폰트를 안정적으로 사용할 수 있도록 합니다.

웹 폰트 무료 다운로드 사이트 #

폰트를 무료로 제공하는 주요 사이트들을 소개해 드리겠습니다:

  • 눈누 (noonnu.cc): 상업적으로 이용 가능한 무료 한글 폰트를 모아놓은 사이트로, 다양한 폰트를 한눈에 확인하고 다운로드할 수 있습니다.
    눈누 바로가기 

     

  • 네이버 글꼴 모음: 네이버에서 개발한 150여 종의 글꼴을 무료로 제공하며, 다운로드 및 웹폰트 URL을 통해 자유롭게 사용할 수 있습니다.
    한글입력기 바로가기

     

 

  • 구글 폰트 (Google Fonts): 다양한 언어의 무료 폰트를 제공하며, 한글 폰트도 다수 포함되어 있습니다.
    Google Fonts 바로가기

     

 

  • 폰트폰트 (fontfont.app): 이미지나 URL을 통해 원하는 폰트를 검색하고 찾을 수 있는 서비스입니다.
    FontFont 바로가기

     

 

  • 공유마당: 한국저작권위원회에서 운영하는 사이트로, 저작권에서 비교적 자유로운 다양한 자료들을 모아놓았습니다.
    공유마당 바로가기

     

이러한 사이트들을 활용하시면 다양한 무료 웹폰트를 손쉽게 이용하실 수 있습니다.

워드프레스에서 웹폰트 사용하는 방법 #

워드프레스에서 .woff 파일을 업로드하려면 기본적으로 보안상 제한되어 있기 때문에 설정을 변경해 주어야 합니다. 다음 방법을 통해 .woff 파일을 업로드할 수 있습니다:

 

방법 1: functions.php 파일에 코드 추가 #

  1. 워드프레스 대시보드에서 **”외모” > “테마 편집기”**로 이동합니다.
  2. 현재 사용 중인 테마의 functions.php 파일을 선택합니다.
  3. 아래의 코드를 추가한 후 **”파일 업데이트”**를 클릭합니다:
    php
    function custom_mime_types($mimes) {
    $mimes['woff'] = 'font/woff';
    $mimes['woff2'] = 'font/woff2';
    return $mimes;
    }
    add_filter('upload_mimes', 'custom_mime_types');
  4. 이제 .woff 및 .woff2 파일을 미디어 라이브러리에 업로드할 수 있습니다.

방법 2: 플러그인 사용 #

  1. **”WP Add Mime Types”**와 같은 플러그인을 설치합니다.
  2. 플러그인을 활성화한 후 설정 > Mime Types로 이동합니다.
  3. .woff와 .woff2 파일을 허용 목록에 추가합니다:
    • woff = font/woff
    • woff2 = font/woff2
  4. 설정을 저장한 후 파일을 업로드합니다.

 

이렇게 하면 .woff 파일을 쉽게 업로드할 수 있습니다! 😊

웹폰트 로컬 VS cdn 로딩속도 어떤게 빠를까? #

웹폰트를 로컬에서 불러와서 사용하는 것과 웹에서 불러와서 사용하는 것은 각각 장단점이 있으며, 속도에 미치는 영향도 다릅니다.

1. 로컬에서 불러오는 경우 #

  • 속도: 로컬 웹폰트는 사용자 웹사이트 서버에서 직접 로드되기 때문에 초기 페이지 로드 시 더 빠를 수 있습니다. 특히 웹사이트가 방문자와 가까운 서버에 호스팅되어 있다면 지연 시간이 줄어들어 성능이 개선됩니다.
  • 장점:
    • 제어: 웹폰트 파일을 완전히 제어할 수 있어, 필요에 따라 파일을 압축하거나 최적화할 수 있습니다.
    • 일관성: 폰트가 특정 웹사이트에만 사용되므로, 브라우저 캐시를 사용해 지속적으로 빠르게 로드할 수 있습니다.
  • 단점: 폰트 파일을 직접 관리해야 하므로, 업데이트나 유지보수가 번거로울 수 있습니다. 또한, CDN보다 로드 속도가 느려질 수 있는 경우도 있습니다.

2. 웹에서 불러오는 경우 (cdn) #

  • 속도: 웹폰트를 제공하는 cdn(Content Delivery Network)을 사용할 경우, 전 세계에 분산된 서버를 통해 빠르게 웹폰트를 전달합니다. 사용자가 CDN에서 이미 캐시한 웹폰트를 사용하면 로딩이 더 빨라질 수 있습니다.
  • 장점:
    • 브라우저 캐시: 많은 사이트에서 동일한 cdn 기반의 웹폰트를 사용하기 때문에, 브라우저가 이미 폰트를 캐시하고 있을 가능성이 높습니다. 이렇게 하면 추가 다운로드가 필요 없어 속도가 더 빨라집니다.
    • 간편함: 관리 및 유지보수가 편리하며, 최신 버전의 웹폰트가 자동으로 적용됩니다.
  • 단점: 웹폰트 제공 서비스가 느려지거나 중단될 경우, 폰트 로드에 문제가 발생할 수 있습니다. 또한, 사용자 위치에 따라 지연 시간이 발생할 수 있습니다.

어떤 게 더 빠를까? #

  • 로컬 웹폰트: 자체 서버 성능이 뛰어나고, 특정한 웹사이트에서만 웹폰트를 사용한다면 더 빠를 수 있습니다. 특히 폰트 파일을 최적화하여 압축하면 성능을 극대화할 수 있습니다.
  • cdn 웹폰트: 글로벌 방문자와 사이트 규모가 클 경우, CDN을 사용하는 것이 더 빠를 수 있습니다. CDN은 방문자의 지리적 위치에 따라 가장 가까운 서버에서 웹폰트를 제공해 최적의 속도를 보장합니다.

결론 #

  • 소규모 사이트 또는 특정한 지역에만 서비스를 제공한다면 로컬 웹폰트를 사용하는 것이 더 적합할 수 있습니다.
  • 글로벌 사이트나 여러 사이트에서 동일한 웹폰트를 사용할 경우 cdn을 활용하는 것이 더 효율적입니다.

속도 외에도 브라우저 캐시, 유지보수 편리성, 보안 등의 요소를 고려해 선택하는 것이 좋습니다! 😊

웹폰트를 사용하는 이유 #

웹폰트를 사용하는 주요 이유는 웹사이트의 디자인과 브랜드 아이덴티티를 강화하고, 일관된 사용자 경험을 제공하기 위해서입니다. 구체적으로 보면:

  1. 브랜딩 및 디자인 통일성: 웹폰트는 특정 브랜드의 고유한 글꼴을 웹사이트에 적용할 수 있어, 인쇄물이나 로고와 일관된 브랜딩을 유지하는 데 도움을 줍니다. 이를 통해 브랜드 인식을 높일 수 있습니다.
  2. 디자인 다양성: 웹폰트는 웹사이트의 텍스트를 보다 다양하고 창의적으로 표현할 수 있게 해줍니다. 기본 시스템 글꼴만 사용할 때보다 더 세련되고 독창적인 디자인을 구현할 수 있습니다.
  3. 접근성과 가독성: 웹폰트를 사용하면 다양한 디바이스에서 텍스트가 명확하게 보이도록 최적화할 수 있습니다. 특히 WOFF나 WOFF2 같은 형식을 사용하면 로딩 속도가 빠르고, 모바일 기기에서도 가독성을 확보할 수 있습니다.
  4. 일관된 사용자 경험: 웹폰트는 모든 사용자에게 동일한 글꼴을 제공하므로, 운영체제나 브라우저에 상관없이 일관된 시각적 경험을 제공합니다. 기본 시스템 글꼴에 의존할 경우, 사용자 환경에 따라 글꼴이 달라질 수 있어 디자인이 일관되지 않을 수 있습니다.
  5. SEO와 웹 성능: 웹폰트는 가볍게 최적화할 수 있어 성능에 영향을 덜 미치고, SEO에도 영향을 주지 않습니다. 사용자의 경험을 해치지 않으면서 디자인을 강화할 수 있습니다.

웹폰트를 활용하면 웹사이트가 보다 프로페셔널하고 매력적으로 보이기 때문에 많은 웹 개발자와 디자이너가 선호합니다. 😊

워드프레스, 웹디자인
피드백을 주시면 기운이 납니다!

Powered by BetterDocs

코멘트 제출

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다