다운로드한 글씨체, 블로그에 아주 쉽게 적용하는 방법!

작성자:

다운로드한 글씨체, 블로그에 아주 쉽게 적용하는 방법!

목차

  1. 시작하며: 왜 나만의 글씨체를 사용해야 할까?
  2. 가장 쉬운 방법: 웹폰트 서비스를 활용하자!
    • 구글 폰트(Google Fonts) 사용법
    • 눈누(Noonnu) 사용법
  3. 내 PC에 설치된 폰트를 웹에 적용하기: CSS @font-face
    • @font-face란?
    • 폰트 파일 준비하기
    • CSS 코드 작성하기
    • HTML에 적용하기
  4. 자주 묻는 질문 (FAQ)
    • 왜 내 블로그에 적용한 폰트가 깨져 보일까요?
    • 폰트 라이선스는 어떻게 확인하나요?
    • 모바일 환경에서도 잘 보이나요?
  5. 마치며: 나만의 개성을 담은 블로그를 만들어요!

시작하며: 왜 나만의 글씨체를 사용해야 할까?

배너2 당겨주세요!

여러분은 블로그를 운영하면서 ‘나만의 색깔’을 어떻게 보여줄지 고민해 보신 적이 있나요? 글의 내용도 중요하지만, 글이 담긴 시각적인 요소 역시 독자에게 큰 영향을 미칩니다. 그중에서도 글씨체는 블로그의 전체적인 분위기를 결정하는 데 중요한 역할을 합니다. 평범한 기본 글꼴 대신, 나만의 개성을 담은 글씨체를 사용하면 방문자에게 더 강렬한 인상을 남길 수 있고, 브랜드의 통일성을 높이는 데에도 도움이 됩니다. 이 글에서는 다운로드한 글씨체를 블로그에 매우 쉽게 적용하는 방법을 단계별로 자세히 알려드릴게요. 코딩 지식이 없더라도 걱정하지 마세요. 가장 쉬운 방법부터 차근차근 시작해 봅시다!

가장 쉬운 방법: 웹폰트 서비스를 활용하자!

웹폰트 서비스는 폰트 파일을 직접 서버에 올릴 필요 없이, 제공하는 링크만으로 글씨체를 쉽게 적용할 수 있게 해줍니다. 이 방법은 가장 간단하고, 별도의 호스팅 비용이 들지 않으며, 속도도 빠르다는 장점이 있습니다.

구글 폰트(Google Fonts) 사용법

구글 폰트는 전 세계에서 가장 많이 사용되는 무료 웹폰트 서비스 중 하나입니다. 다양한 언어와 스타일의 폰트를 제공합니다.

  1. 구글 폰트 접속: https://fonts.google.com/에 접속합니다.
  2. 폰트 선택: 검색창에 원하는 폰트 이름을 입력하거나, 필터 기능을 사용해 원하는 스타일의 폰트를 찾습니다. 한글 폰트를 찾고 싶다면 Language 필터에서 Korean을 선택하면 됩니다.
  3. 폰트 스타일 선택 및 Embed 코드 복사: 원하는 폰트를 클릭하면 상세 페이지로 이동합니다. 여러 가지 폰트 두께(Light, Regular, Bold 등)가 있는데, 필요한 스타일을 선택하고 오른쪽에 있는 + Select this style 버튼을 클릭합니다. 선택한 스타일이 오른쪽에 있는 Selected families 패널에 추가됩니다. 이 패널을 클릭하면 Embed 코드가 나타납니다. Link 탭에 있는 <link> 태그 전체를 복사합니다.
  4. 블로그 HTML에 붙여넣기: 블로그 관리자 페이지로 이동하여 HTML/CSS 편집 메뉴를 찾습니다. <head> 태그와 </head> 태그 사이에 복사한 <link> 코드를 붙여넣습니다.
  5. CSS에 폰트 적용: 이제 블로그의 CSS 파일로 이동합니다. 원하는 요소(예: body, .post-title, .content)에 font-family 속성을 추가하고, 구글 폰트에서 제공하는 font-family 값을 붙여넣습니다. 예를 들어, Noto Sans KR 폰트를 본문에 적용하고 싶다면 다음과 같이 작성합니다: 
    body {
  font-family: 'Noto Sans KR', sans-serif;
}
  6. 저장 및 확인: 모든 변경 사항을 저장하고 블로그에 접속하여 글씨체가 제대로 적용되었는지 확인합니다.

눈누(Noonnu) 사용법

눈누는 국내 디자이너들이 만든 무료 한글 폰트를 모아놓은 웹폰트 서비스입니다. 한글 폰트를 찾고 적용하는 데 매우 편리합니다.

  1. 눈누 접속: https://noonnu.cc/에 접속합니다.
  2. 폰트 선택: 원하는 폰트를 찾아 클릭합니다. 폰트를 직접 입력해서 미리보기 할 수 있는 기능도 제공합니다.
  3. 웹폰트 코드 복사: 상세 페이지를 아래로 스크롤하면 **’웹폰트’**라는 섹션이 있습니다. 여기에 있는 @import 코드를 통째로 복사합니다. 이 코드는 <style> 태그 안에 바로 붙여넣을 수 있습니다.
  4. CSS에 코드 붙여넣기: 블로그 관리자 페이지의 CSS 편집 화면으로 이동합니다. 파일의 맨 위쪽에 복사한 @import 코드를 붙여넣습니다.
  5. 폰트 적용: 구글 폰트와 마찬가지로, font-family 속성을 사용하여 원하는 요소에 폰트를 적용합니다. 눈누 웹폰트 코드 바로 아래에 있는 font-family 이름을 복사해서 사용하면 됩니다. 
    body {
  font-family: 'BM Jua', sans-serif;
}
  6. 저장 및 확인: 변경 사항을 저장하고 블로그를 새로고침하여 적용된 폰트를 확인합니다.

내 PC에 설치된 폰트를 웹에 적용하기: CSS @font-face

웹폰트 서비스에 없는, 내가 직접 다운로드한 폰트를 사용하고 싶다면 @font-face 규칙을 사용해야 합니다. 이 방법은 조금 더 복잡해 보일 수 있지만, 한 번 익혀두면 어떤 폰트든 자유롭게 사용할 수 있습니다.

@font-face란?

**@font-face**는 웹 페이지에 사용자 정의 글꼴을 로드하는 데 사용되는 CSS 규칙입니다. 이 규칙을 사용하면 방문자의 컴퓨터에 해당 폰트가 설치되어 있지 않아도 웹 서버에서 폰트 파일을 다운로드하여 보여줄 수 있습니다.

폰트 파일 준비하기

  1. 폰트 파일 형식 변환: 웹 브라우저는 폰트 파일 형식에 따라 지원 여부가 다릅니다. 따라서 .ttf (TrueType), .otf (OpenType) 같은 PC용 폰트를 .woff (Web Open Font Format), .woff2 형식으로 변환하는 것이 좋습니다. .woff2는 .woff보다 압축률이 높아 로딩 속도가 빠르므로 woff2를 우선적으로 사용하는 것을 권장합니다.
  2. 온라인 변환기 활용: font squirrel이나 transfonter와 같은 온라인 폰트 변환기를 사용하면 파일을 쉽게 변환할 수 있습니다. 변환된 파일은 여러 형식을 포함하고 있으므로, 모든 브라우저에서 호환성을 확보할 수 있습니다.
  3. 서버에 폰트 파일 업로드: 블로그 서버나 개인 웹서버의 특정 디렉터리에 변환된 폰트 파일을 업로드합니다. 보통 fonts라는 폴더를 만들어 관리합니다.

CSS 코드 작성하기

@font-face 규칙은 다음과 같은 구조로 작성합니다.

@font-face {
  font-family: 'MyCustomFont'; /* 폰트의 이름을 정합니다. */
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff'),
       url('/fonts/MyCustomFont.ttf') format('truetype');
  font-weight: normal; /* 폰트의 두께를 지정합니다. */
  font-style: normal;  /* 폰트의 스타일을 지정합니다. */
}
  • font-family: 이 폰트를 참조할 때 사용할 이름을 지정합니다. 자유롭게 정할 수 있습니다.
  • src: 폰트 파일의 경로를 지정합니다. url() 함수를 사용하며, 여러 개의 경로를 쉼표(,)로 구분하여 나열할 수 있습니다. 뒤에 format()을 추가하여 브라우저가 어떤 형식의 파일인지 알 수 있도록 합니다. woff2를 가장 먼저 작성하는 것이 좋습니다.
  • font-weight, font-style: 폰트의 두께와 스타일을 지정합니다.

HTML에 적용하기

@font-face 규칙을 CSS에 추가했다면, 이제 이 폰트를 원하는 요소에 적용할 수 있습니다.

body {
  font-family: 'MyCustomFont', sans-serif; /* 위에서 정한 폰트 이름을 사용합니다. */
}

h1 {
  font-family: 'MyCustomFont', serif;
  font-weight: bold; /* 폰트의 두께를 지정할 수 있습니다. */
}

font-family 속성에 @font-face에서 정의한 이름을 가장 먼저 적어줍니다. 그리고 뒤에 sans-serif나 serif 같은 일반 폰트를 추가해 줍니다. 이는 만약 사용자 환경에서 해당 폰트를 불러오지 못했을 때 대신 표시될 폰트입니다.

자주 묻는 질문 (FAQ)

Q. 왜 내 블로그에 적용한 폰트가 깨져 보일까요?

A. 몇 가지 이유가 있을 수 있습니다.

  1. 폰트 경로 오류: @font-face의 src 경로가 올바르지 않으면 폰트를 불러올 수 없습니다. 경로가 제대로 설정되었는지 확인하세요.
  2. 파일 형식 미지원: 사용하는 브라우저가 해당 폰트 형식을 지원하지 않을 수 있습니다. .woff2, .woff 등 다양한 형식을 포함하여 호환성을 높여야 합니다.
  3. 라이선스 문제: 일부 폰트는 상업적 사용이나 웹 사용이 금지되어 있을 수 있습니다. 폰트의 라이선스를 반드시 확인하세요.

Q. 폰트 라이선스는 어떻게 확인하나요?

A. 폰트를 다운로드받은 사이트나 폰트 파일에 포함된 라이선스 정보를 확인해야 합니다. 대부분 OFL (Open Font License) 또는 SIL (SIL Open Font License) 등의 라이선스 정보를 포함하고 있습니다. 개인용, 비상업적 사용만 허용하는 폰트도 많으니 주의가 필요합니다.

Q. 모바일 환경에서도 잘 보이나요?

A. @font-face 규칙이나 웹폰트 서비스는 기본적으로 모든 웹 환경에서 작동하도록 설계되어 있습니다. 하지만 폰트 파일의 용량이 크면 모바일 환경에서 로딩 속도가 느려질 수 있습니다. .woff2와 같이 압축률이 높은 형식을 사용하고, 필요한 폰트 스타일만 선택하여 용량을 최소화하는 것이 좋습니다.

마치며: 나만의 개성을 담은 블로그를 만들어요!

지금까지 다운로드한 글씨체를 블로그에 적용하는 매우 쉬운 방법을 알아보았습니다. 웹폰트 서비스를 이용하면 코딩 지식이 없더라도 몇 번의 클릭만으로 멋진 폰트를 적용할 수 있고, @font-face를 활용하면 세상의 모든 폰트를 내 블로그에 담을 수 있습니다. 작은 변화 같지만, 자신만의 글씨체로 꾸며진 블로그는 방문자에게 훨씬 더 전문적이고 개성적인 인상을 줍니다. 오늘 배운 내용을 바탕으로 여러분의 블로그를 더욱 아름답게 꾸며 보세요!

댓글 남기기

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.