워드프레스 블로그 '내가 가진 글꼴 적용'할 수 있는 방법

 

폰트적용하기

 

워드프레스를 운영하면서 신경써야할것이 한두개가 아닙니다. 그중에서도 사이트속도는 무시하지못할 중요한 요소이죠. 구글의 SEO에도 영향을 엄청나게 끼치는 요소이므로 꼭 신경써야하죠. 폰트는 사이트의 디자인을 멋지게 만들어주는 하나의 요소인데 기본적으로 테마에서 적용해주는 경우나 내가 플러그인을 사용해서 구글폰트를 적용하는경우가 많습니다.

 

예뻐서 좋긴한데 사이트의 로딩을 느리게 만들어서 SEO점수를 깍아먹고 방문자도 느린 내 사이트를 보고 실망해 글을 읽어보기도 전에 나가버리는 경우가 생길 수 있습니다. 이렇게 중요한 폰트. 하지만 내가 생각하는대로 꾸미고 싶은 마음도 굴뚝같은데요. 이렇게 폰트를 적용하고 싶을때 해결할 수 있는 좋은 방법이 있습니다.

 

블로그작업하려면 저렴하고 성능좋은 노트북하나 장만하시는것이 어떨까요? ▼

 

 

 

웹폰트를 다운로드하자

 

웹폰트는 또 뭐야?

이번에는 또 무슨 웹폰트 타령이냐? 하신다면 간단하게 폰트의 확장자명을 확인할 필요가 있습니다. 폰트는 컴퓨터에 설치하여 사용하는 경우와 웹사이트등에 적용할 수 있는 폰트의 확장자가 다르고 그에 맞게 폰트를 적용시켜주면 더욱 빠르고 확장성이 좋게 사이트가 운영될 수 있습니다. 아래에는 각 확장자가 하는 역할과 사용처에 대한 설명입니다.

 

.ttf (TrueType Font)

역할: TrueType 폰트 포맷으로, 글꼴의 모양과 크기를 정의합니다.
사용: 주로 웹사이트, 문서, 프리젠테이션 등에서 텍스트 디자인에 사용됩니다.

 

.otf (OpenType Font)

역할: OpenType 폰트 포맷으로, TrueType의 확장된 버전으로 높은 품질의 글꼴 표현을 지원합니다.
사용: 주로 전문적인 디자인 작업에서 활용되며, 인쇄물 및 디자인 소프트웨어에서 많이 사용됩니다.

 

.woff (Web Open Font Format)

역할: 웹에서 사용하기 위한 폰트로, 압축된 형태로 제공되어 페이지 로딩 속도를 향상시킵니다.
사용: 주로 웹 개발에서 웹페이지에 특정한 글꼴을 사용하고자 할 때 활용됩니다.

 

.eot (Embedded OpenType)

역할: Microsoft에서 개발한 웹페이지에서 글꼴을 표시하기 위한 포맷으로, 구형 Internet Explorer에서 사용됩니다.
사용: 주로 오래된 브라우저 호환성을 위해 필요한 경우에 사용됩니다.

 

.svg (Scalable Vector Graphics)

역할: 확장 가능한 벡터 그래픽 폰트로, 크기를 조절해도 화질이 유지됩니다.
사용: 웹 개발에서 아이콘 폰트 등에 활용되며, 다양한 크기의 화면에서 일관된 표현을 제공합니다.

.woff2 (Web Open Font Format 2)

역할: 웹에서 사용하기 위한 글꼴 포맷으로, 압축률이 높아 빠른 웹페이지 로딩을 지원합니다.
사용: 주로 최신 브라우저에서 웹페이지에 사용되며, 기존 WOFF보다 더 효율적입니다.

 

설명에서 볼 수 있듯이 요즘 가장 효율적으로 활용할 수 있는것은 woff2파일입니다. 자신이 원하는 폰트의 .woff2파일을 찾아서 내 서버에 업로드하시면 되겠습니다. 내 서버에 업로드한 후에 그파일을 내 워드프레스 블로그에 적용시켜주는것이 바로 아래에 설명할 플러그인입니다.

 

 

 

woff2파일 만들기

이제 웹폰트가 어떤 의미인지 알았다면 이 폰트를 찾아야 하는데 나는 이런폰트를 가진게 없는데 어떻하지? 생각한다면 아래의 글을 따라하세요.

 

흔히 무료로 다운로드 받을 수 있는 폰트 ttf파일등은 검색을 통하거나 콤마군의 블로그 카테고리에서도 다운로드 받을 수 있습니다. 검색을 통해서 혹은 폰트배포자가 아예 만들어둔 woff2파일이 있다면 베스트이겠지만 그렇지않다면 직접 폰트를 변환하시면 됩니다. 

 

구글에서 검색창에 TTF to WOFF2 라고 검색하시면 아래와 같은 결과값을 만날 수 있습니다. 맘에 드는 사이트에서 ttf파일을 woff2파일로 변환해볼 수 있습니다.

 

구글검색에서 검색한 화면

 

 

 

저는 나눔고딕폰트 ttf파일을 woff2파일로 변환하여 보았습니다.

 

 

 

 

금방 변환되어서 아래의 파일처럼 woff2파일로 만들어졌습니다. 간단하게 만들어져서 좋습니다. 하지만 여기서 주의할점은 만들었다고 다가 아니라 만들어진 파일의 용량이 너무 크다거나 한다면 서버에 올렸을때 과부하가 걸릴 수 있으니 주의해서 사용해야 합니다.

 

나눔고딕.woff2

0.64MB

 

 

이제 만들어진 파일을 서버에 올려주세요. 서버에 올리는 방법은 보통 FTP를 이용해서 서버에 접속한후 폴더에 올리는 방식인데 사용하는 FTP가 없고 서버의 접속정보를 모르겠다면 내가 현재 사용하고 있는 호스팅업체의 홈페이지에 접속해서 ftp접속 방법을 확인하고 접속해주세요. FTP프로그램은 가장 유명한 파일질라를 다운로드 받아서 사용하셔도 되겠습니다.

 

▼ 파일질라 홈페이지 바로가기▼

 

이런 럭셔리하고 예쁜 안마의자 보셨나요? 인테리어를 더 살려주는 안마의자 추천▼

 

 

 

저는 FTP에 접속한후 어디에 파일을 올려야하는지 알려드리겠습니다. 순서는 wp/wp-content/uploads/fonts폴더 순서대로 이동하여 woff2파일을 업로드해주시면 되겠습니다. uploads폴더가 없거나 fonts폴더가 없을 수 있으니 없다면 생성하여 업로드해주세요. 저는 위에서 설명한 나눔고딕이 아닌 제가 좋아하는 본고딕(Noto Sans KR)폰트를 업로드하였습니다. 

 

 

 

 

이렇게까지 하시면 이제 거의다 왔습니다. 다음단계를 살펴보세요.

 

 

 

CSS적용하기

 

이제 워드프레스 블로그를 접속하여 테마의 사용자정의하기를 눌러 추가 CSS를 눌러서 내 사이트에 맞게 폰트를 적용시켜주는 코드를 삽입하면 됩니다.

 

​

 

 

저는 제가 사용하는 워드프레스테마 Blocksy에 맞는 폰트를 적용시켜보았습니다. 각자의 테마에 맞는 코드가 다를 수 있으니 참고하여 사용해보세요. 가장 위에서부터 Font-face에 대한 코드는 모두 내가 이폰트를 내사이트에서 사용할것이다라고 말하는것과 같으며 url('/wp-content/uploads/fonts/NotosansKR-Black.woff2')의 경로는 위에서 설명한 것처럼 ftp에 파일을 잘올려두셨다면 작동할것입니다. 만약 경로가 다른곳에 폰트를 올렸다면 그 위치를 주소로 표기해주시면 됩니다.

 

그리고 저처럼 NotosansKR폰트가 아닌 다른폰트라면 다른폰트명을 입력해주시면 되겠습니다. 또, 저는 이폰트의 굵기가 여러가지라 그 폰트의 개수만큼 폰트를 적용해준것입니다. 한개의 폰트만 사용한다면 font-face를 한개만 작성하시면 됩니다.

 

/* Noto Sans KR Black */
@font-face {
    font-family: 'NotoSansKR-Black';
    src: local('NotoSansKR-Black'), url('/wp-content/uploads/fonts/NotoSansKR-Black.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Noto Sans KR Bold */
@font-face {
    font-family: 'NotoSansKR-Bold';
    src: local('NotoSansKR-Bold'), url('/wp-content/uploads/fonts/NotoSansKR-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Noto Sans KR DemiLight */
@font-face {
    font-family: 'NotoSansKR-DemiLight';
    src: local('NotoSansKR-DemiLight'), url('/wp-content/uploads/fonts/NotoSansKR-DemiLight.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Noto Sans KR Light */
@font-face {
    font-family: 'NotoSansKR-Light';
    src: local('NotoSansKR-Light'), url('/wp-content/uploads/fonts/NotoSansKR-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Noto Sans KR Medium */
@font-face {
    font-family: 'NotoSansKR-Medium';
    src: local('NotoSansKR-Medium'), url('/wp-content/uploads/fonts/NotoSansKR-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Noto Sans KR Regular */
@font-face {
    font-family: 'NotoSansKR-Regular';
    src: local('NotoSansKR-Regular'), url('/wp-content/uploads/fonts/NotoSansKR-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Noto Sans KR Thin */
@font-face {
    font-family: 'NotoSansKR-Thin';
    src: local('NotoSansKR-Thin'), url('/wp-content/uploads/fonts/NotoSansKR-Thin.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 폰트 적용 예시 */
body {
    font-family: 'NotoSansKR-Medium', sans-serif; /* 원하는 폰트 스타일 적용 */
}


/* h1~h6 요소에 대한 폰트 지정 */
h1 {
    font-family: 'NotoSansKR-Black', sans-serif;
}

h2 {
    font-family: 'NotoSansKR-Black', sans-serif;
}

h3 {
    font-family: 'NotoSansKR-Black', sans-serif;
}

h4 {
    font-family: 'NotoSansKR-Black', sans-serif;
}

h5 {
    font-family: 'NotoSansKR-Black', sans-serif;
}

h6 {
    font-family: 'NotoSansKR-Black', sans-serif;
}

/* 인용문(Quote) 요소에 대한 폰트 지정 */
blockquote {
    font-family: 'NotoSansKR-Medium', sans-serif;
}

/* Pullquote 요소에 대한 폰트 지정 */
.pullquote {
    font-family: 'NotoSansKR-Medium', sans-serif;
}

/* Preformatted 요소에 대한 폰트 지정 */
pre {
    font-family: 'NotoSansKR-Medium', monospace;
}

/* Figcaption에 대한 폰트 지정 */
figcaption {
    font-family: 'NotoSansKR-Medium', sans-serif;
}

/* entry-excerpt 클래스에 대한 폰트 지정 */
.entry-excerpt {
    font-family: 'NotoSansKR-Medium', sans-serif;
}

/* btn 클래스에 대한 폰트 지정 */
.entry-button {
    font-family: 'NotoSansKR-Bold', sans-serif;
}

 

 

위의 코드를 복사하기 어려운 경우 아래의 텍스트파일을 다운로드 받아서 열고 복사하시면 됩니다.

CSS코드.txt

0.00MB

 

 

 

만약 이렇게 적용해서 사이트에 폰트가 제대로 적용되지않는다면 다음순서를 따라 적용해보세요. 이 순서는 내가 적용시켜야할 폰트의 이름을 찾고 그에 맞게 적용시킬 수 있는 코드를 찾는 방법에 대한 설명입니다.

 

기본적으로 코드에서 body, h1,h2,h3, h4, h5, h6등을 적용해주셨다면 대부분의 글자들이 원하는 폰트모양대로 출력이 될텐데 그중 몇몇개는 다른 폰트로 보인다면 내블로그사이트에서 키보드의 12키를 눌러 개발자도구를 열고 아래의 화면에서 보시듯 화살표아이콘을 클릭하여 원하는 글자부분에 마우스를 올려 클릭해주세요.

 

 

 

이렇게 선택하고 클릭하면 우측의 개발자도구창에 푸른색바탕으로 현재 선택한 글자의 이름을 확인할 수 있습니다. 파란색 글자로 나온부분의 이름을 적용하여 폰트를 내맘대로 변경해볼 수 있습니다. 아래의 코드를 보시면 Figcaption이름을 개발자도구의 이름명을 대입하여 적용하고 NotoSansKR-Medium의 부분을 원하는 폰트명으로 적용하여 추가CSS에 코드로 추가하시면 됩니다.

 

/* Figcaption에 대한 폰트 지정 */
figcaption {
    font-family: 'NotoSansKR-Medium', sans-serif;
}

 

 

 

 

모든 과정을 따라하시면 쉽게 적용이 가능하나 처음보시면 어렵다고 느낄수도 있습니다. 하지만 어느정도 이해만 하시면 다음부터는 쉽게쉽게 여러가지폰트를 적용해볼 수 있으니 원하는 폰트가 있다면 포기하지말고 적용하는 공부를 해보시길 바랄께요.

 

이렇게 폰트를 적용하면 사이트 SEO점수에도 플러스가 되니까 구글폰트보다는 꼭 직접적인 폰트를 적용시켜보세요. 이 글이 도움이 되었다면 공감♥과 댓글을 부탁드릴께요. 저는 워드프레스 완전초보자이지만 아는한도내에서는 답변드릴테니 댓글로 질문을 해주셔도 좋습니다.

 

맙소사 이런 할인이! 삼성 건조기 46%할인받고, 5%카드 즉시할인까지 받아서 구매하세요.▼

 

 

 

관련글

 

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

워드프레스 - 업로드 이미지를 자동으로 최적화해주는 플러그인 TinyPNG

워드프레스 - 업로드 이미지를 자동으로 최적화해주는 플러그인 TinyPNG

 

워드프레스 백업 플러그인 All-in-One WP Migration

워드프레스 백업 플러그인 All-in-One WP Migration

 

워드프레스 깔끔하고 친근한 블로그 테마 - BlogDesign Pro

워드프레스 깔끔하고 친근한 블로그 테마 - BlogDesign Pro

 

 

 

참고하세요

 

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 다양한 어필리에이트 활동으로 수익금을 지급받을 수 있는 링크가 있습니다.
· 이 글은 블로그정보 카테고리에 위치하고 있습니다. 비슷한글을 보시려면 아래를 확인하세요.