WordPress 사이트 에 브랜드와 개성을 추가하는 가장 좋은 방법 은 테마의 글꼴을 변경하는 것입니다.

타이포그래피 및 기타 밴딩 요소는 좋은 첫인상을 만들고 사이트 방문자의 분위기를 조성하며 브랜드 아이덴티티를 확립합니다. 연구^(Studies) 에 따르면 글꼴은 독자의 학습, 정보 기억, 텍스트 암기 능력에 영향을 미친다는 사실도 밝혀졌습니다.

WordPress 테마^{(installed a WordPress theme)} 를 설치 했거나 CSS 및 코딩 경험이 있는 경우 ^(CSS)WordPress 에서 글꼴을 변경하는 데 사용할 수 있는 몇 가지 옵션이 표시됩니다 .

WordPress에서 글꼴을 변경하는 방법^{(How to Change Fonts in WordPress)}

WordPress에서 글꼴을 변경하는 데 사용할 수 있는 세 가지 주요 옵션이 있습니다.

• 타사 사이트에서 호스팅되는 Google Fonts , Fonts.com 또는 Adobe Edge Web Fonts 와 같은 웹 글꼴 사용
• 웹 글꼴^(Code) 을 테마에 코딩하고 대기열에 추가
• ^(Host)사이트에서 글꼴을 호스팅 하고 테마에 추가

1. 웹 글꼴을 사용하여 WordPress에서 글꼴을 변경하는 방법^{(1. How to Change Fonts in WordPress Using Web Fonts)}

웹 글꼴을 사용하면 글꼴 파일을 다운로드하고 업로드하는 것보다 WordPress 에서 글꼴을 더 쉽고 빠르게 변경할 수 있습니다.

이 옵션을 사용하면 변경 사항이 있을 때마다 업데이트하지 않고도 다양한 글꼴에 액세스 할 수 있으며 호스팅에서 서버 공간을 차지하지 않습니다. ^{(access a variety of fonts)}글꼴은 플러그인을 사용하거나 사이트에 코드를 추가하여 공급자의 서버에서 직접 제공됩니다.

^(Make)사이트에 대해 선택한 웹 글꼴이 브랜드 아이덴티티와 일치하고 본문 텍스트로 읽기 쉽고 웹 사이트 방문자에게 친숙하고 원하는 분위기와 이미지를 전달해야 합니다 .

WordPress 플러그인을 사용^{(using a WordPress plugin)} 하거나 사이트에 몇 줄의 코드를 추가하여 수동으로 웹 글꼴을 추가할 수 있습니다. 두 가지 옵션을 모두 살펴보겠습니다.

WordPress 플러그인을 사용하여 웹 글꼴을 추가하는 방법^{(How to Add Web Fonts Using a WordPress Plugin)}

선택한 웹 글꼴에 따라 WordPress 플러그인을 사용하여 글꼴 라이브러리에 액세스하고 사이트에서 원하는 글꼴을 선택할 수 있습니다. 이 가이드에서는 Google Fonts 를 선택 하고 Google Font Typography^{(Google Fonts Typography)} 플러그인을 사용했습니다.

1. 시작하려면 WordPress 관리 대시보드에 로그인하고 Plugins > Add New 를 선택합니다 .

1. 검색 상자에 Google Fonts Typography 를 입력 하고 지금 설치^{(Install Now)} 를 선택합니다 .

1. 활성화^(Activate) 를 선택 합니다 .

1. 그런 다음 Appearance > Customize 정의 로 이동 하여 사용자 정의 프로그램^(Customizer) 에 액세스합니다 .

1. Google 글꼴^{(Google Fonts)} 섹션 을 선택합니다 .

1. 그런 다음 링크를 클릭하여 글꼴 설정을 열고 다음과 같이 구성합니다.

• 기본 설정^{(Basic Settings)} 에서 본문, 제목 및 버튼의 기본 글꼴을 설정합니다.

• 고급 설정^{(Advanced Settings)} 에서 사이트 제목과 설명, 메뉴, 머리글과 콘텐츠, 사이드바, 바닥글을 구성합니다.

• ^(Uncheck)사이트 속도 저하를 방지 하려면 ^{(avoid slowing down your site)}글꼴 로드^{(Font Loading)} 섹션 에서 원하지 않는 글꼴 두께를 선택 취소 하십시오 .

사이트에 제대로 표시되지 않거나 작동하지 않는 글꼴이 있는 경우 디버깅^{(Debugging )} 섹션을 사용하여 문제를 해결하세요.

1. 사용자 지정 프로그램^(Customizer) 에서 이러한 설정을 테스트하여 원하는 대로 작동하는지 확인한 다음 게시^(Publish) 를 선택할 수 있습니다.

참고 : ^(Note)사용자 정의^(Customizer) 도구에서 게시를 선택하는 것을 잊으면 변경한 모든 내용이 손실됩니다.

코드를 사용하여 웹 글꼴을 추가하는 방법^{(How to Add Web Fonts Using Code)}

테마 코드에 액세스할 수 있는 경우 웹 글꼴을 설치하고 사용할 수 있습니다. 이것은 추가 플러그인을 추가하는 수동 대안이지만 단계를 주의 깊게 따르면 복잡하지 않습니다.

그러나 WordPress^(WordPress) 테마 디렉토리의 테마 또는 사용자 정의 테마 를 사용하는 경우 취해야 할 다른 단계가 있습니다 .

WordPress 테마 디렉토리 에서 테마를 구입한 경우 하위 테마^{(create a child theme)} 를 생성한 다음 style.css 및 functions.php 파일을 제공합니다. 테마에서 스타일시트와 함수 파일을 편집할 수 있으므로 사용자 정의된 테마가 있는 경우 더 쉽습니다.

1. 시작하려면 Google 글꼴^{(Google Fonts)} 라이브러리에서 글꼴을 선택하고 + (plus) 아이콘을 선택하여 라이브러리에 추가합니다.

1. 그런 다음 사이트에 추가할 코드가 있는 하단의 탭을 선택합니다. 포함^(Embed) 탭 에서 글꼴^{(Embed font)} 포함 섹션으로 이동합니다 . 다음과 같은 Google Fonts 에서 생성된 코드를 찾을 수 있습니다 .

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

참고^(Note) : 이 가이드에서는 Work Sans 를 선택했으므로 선택한 항목에 따라 글꼴 이름이 다를 수 있습니다.

1. 코드의 이 부분을 복사합니다. https://fonts.googleapis.com/css2?family=Work+Sans

이렇게 하면 타사 플러그인과의 충돌을 방지하기 위해 Google 글꼴 서버에서 스타일을 대기열에 추가할 수 있습니다. ^{(Google Fonts)}또한 더 쉽게 자식 테마를 수정할 수 있습니다.

1. 글꼴을 대기열에 넣으려면 함수 파일을 열고 다음 코드를 추가합니다. ( 링크를 Google Fonts 에서 가져온 링크로 교체^(Replace) ):

함수 wosib_add_google_fonts() { ^{(function wosib_add_google_fonts() {)}
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

1. 다음과 같이 앞으로 더 많은 글꼴을 추가하려면 함수에 새 줄을 추가하거나 같은 줄에 추가할 수 있습니다.

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

이 경우 Cambria^(Cambria) 와 Work Sans 글꼴 을 모두 대기열에 넣었습니다 .

다음 단계는 테마의 스타일시트에 글꼴을 추가하여 사이트에서 글꼴이 작동하도록 하는 것입니다.

1. 이렇게 하려면 테마의 style.css 파일을 열고 다음과 같이 웹 글꼴로 개별 요소의 스타일을 지정하는 코드를 추가합니다.

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
글꼴군: 'Cambria', serif; ^{(font-family: ‘Cambria’, serif;)}
}

이 경우 기본 글꼴은 Work Sans 이고 h1, h2 및 h3과 같은 헤더 요소는 Cambria 를 사용 합니다.

완료되면 스타일시트를 저장하고 글꼴이 제대로 작동하는지 확인합니다. 그렇지 않은 경우 스타일시트에서 글꼴이 재정의되지 않는지 확인하거나 브라우저 캐시를 지우고 다시 시도하십시오.

1. 특히 오래된 장치를 사용하거나 연결 상태가 좋지 않거나 글꼴 제공업체에 기술적인 문제가 있는 경우 글꼴을 쉽게 렌더링하거나 액세스할 수 있도록 백업 글꼴을 준비하세요. 이렇게 하려면 스타일시트로 이동하여 CSS 를 편집하여 다음과 같이 읽습니다.

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

모든 것이 정상이면 사이트 방문자에게 기본 웹 글꼴( 여기서는 Work Sans^{(Work Sans)} 및 Cambria )이 표시 됩니다. 문제가 있는 경우 백업 글꼴(예: 우리의 경우 Arial 또는 Times New Roman )이 표시 됩니다.

2. 글꼴을 호스팅하여 WordPress에서 글꼴을 변경하는 방법^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

자체 서버에서 글꼴을 호스팅하면 웹 글꼴의 성능을 최적화하는 데 도움이 되지만 타사 사이트에서 리소스를 가져오는 대신 더 안전한 방법 이기도 합니다.^{(a more secure way)}

Google 글꼴 및 기타 웹 글꼴을 사용하면 로컬에서 호스팅되는 글꼴로 사용할 글꼴을 다운로드할 수 있지만 라이선스가 허용하는 한 컴퓨터에 다른 글꼴을 다운로드할 수 있습니다.

1. 시작하려면 글꼴 파일을 다운로드하고 압축을 풀고 사이트에 업로드한 다음 스타일시트에 링크합니다. 이 경우 웹 글꼴에서 했던 것처럼 functions.php 파일의 글꼴을 대기열에 넣을 필요가 없습니다. 웹사이트에서 사용하기 전에 업로드하는 파일이 .woff 형식인지 확인하십시오.^(.woff)

1. 다음으로 wp-content/themes/themename 으로 이동하여 글꼴 파일을 테마에 업로드합니다. 
2. 스타일시트를 열고 다음 코드를 추가합니다(이 경우 Work Sans 글꼴을 사용하지만 이를 자신의 글꼴로 바꿀 수 있음).

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
글꼴 스타일: 일반; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: 볼드체; ^{( font-weight: bold;)}
글꼴 스타일: 일반; ^{(font-style: normal;)}
}

@font-face {
글꼴군: 'Cambria'; ^{(font-family: ‘Cambria’;)}
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
글꼴 스타일: 일반; ^{( font-style: normal;)}
}

참고^(Note) : @fontface를 사용하면 굵게, 기울임꼴 및 기타 글꼴 변형을 사용할 수 있으며, 그 후에 각 글꼴의 두께 또는 스타일을 지정할 수 있습니다.

1. 다음으로 다음과 같이 요소의 스타일을 추가합니다.

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

WordPress 타이포그래피 사용자 정의^{(Customize Your WordPress Typography)}

WordPress 에서 글꼴을 변경 하는 것은 브랜딩 및 사용자 경험을 개선하는 좋은 아이디어입니다. 간단한 작업은 아니지만 테마를 더 잘 제어할 수 있습니다.

^(Were)이 가이드의 팁을 사용하여 단계에 따라 사이트의 글꼴을 사용자 정의할 수 있었습니까 ? 의견에 알려 주십시오.^(Tell)

How to Change Fonts in WordPress

Α great way to add some branding and individualism to your WordPress ѕite is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• 한 호스트에서 다른 호스트로 WordPress site을 이동하는 방법

• Microsoft Azure에 WordPress 설치 및 설정 방법

• Microsoft Azure에서 Blazysely Fast WordPress을 실행하는 방법

• WordPress에서 Privacy을 구성하는 방법과 중요한 이유

• Google Cloud Platform에 WordPress를 설치하는 방법

• WordPress 웹 사이트의 페이지를 암호로 보호하는 방법

• WordPress에 테마를 설치하는 방법

• 컴퓨터에 WordPress 테스트 사이트를 설치하는 방법

• WordPress 블로그에서 WP Super Cache를 사용하는 방법

• 어떻게 Google Webmaster Tool와 Broken Links을 추적 할 수

• WordPress용 AMP란 무엇이며 설치 방법

• 9 새로운 WordPress 설치를 위한 플러그인이 있어야 합니다.

• WordPress를 위한 3가지 최고의 SEO 플러그인

• Squarespace 대 WordPress: 더 나은 사이트 플랫폼은 무엇입니까?

• 웹 사이트가 AdSense에서 금지 된 경우 확인하는 방법

• WordPress에서 Child Theme 만들기

• .HTACCESS를 사용하여 WordPress 사이트의 속도를 높이는 방법

• 요점을 얻을 수 있는 최고의 블로그 작성 형식

• 모바일 친화적인 웹사이트를 위한 7가지 WordPress 팁

• WordPress의 P2 테마를 사용하여 자신의 Twitter와 같은 웹 사이트를 설정하는 방법