2022년 Elementor 웹사이트에 사용자 정의 글꼴을 추가하는 방법

타이포그래피는 웹 디자이너가 글자와 텍스트를 멋지게 배치하는 주요 관심사 중 하나입니다. 올바른 타이포그래피는 전체 디자인 구조를 읽기 쉽고 명확하며 시각적으로 독자의 눈길을 끌도록 만드는 데 큰 역할을 합니다.

"웹사이트 글꼴은 디자인의 90%를 차지합니다."

엘리멘터

WordPress 사이트에서 800개 이상의 내장 글꼴이 포함된 기본 컬렉션을 얻을 수 있습니다. 그러나 브랜드에 대한 맞춤형 타이포그래피가 있거나 웹사이트에 독특한 모양을 부여하려는 경우에는 어려움이 따릅니다. 글쎄, Elementor 사용자 정의 글꼴 기능은 등을 저장할 수 있습니다. 이를 통해 WordPress 사이트에 다양한 사용자 정의 글꼴 스타일, 크기 및 변형을 추가할 수 있습니다.

오늘 튜토리얼에서는 Elementor 사용자 정의 글꼴 기능을 사용하여 WordPress 사이트에 글꼴을 추가하는 방법을 보여 드리겠습니다.

Elementor 사용자 정의 글꼴 기능 설명

사용자 정의(사용자 정의 가능)는 특정 부문에 대한 귀하의 욕구 또는 요구 사항에 따라 생성하거나 생산할 수 있는 특정 것을 의미합니다. 사용자 정의 Elementor 글꼴은 쉽게 사용자 정의할 수 있는 글꼴 형식을 제공합니다. 일반 또는 기본 글꼴을 사용하는 것보다 추가 기능을 효율적으로 생성, 편집 또는 조정할 수 있습니다.

Elementor 사이트에서 5가지 유형의 사용자 정의 글꼴 형식을 찾을 수 있습니다.

1. WOFF(Web Open Font Format) – WOFF는 모든 최신 브라우저에서 지원되므로 사용하는 것이 가장 권장되는 형식입니다.
2. Web Open Font Format(WOFF 2.0) – WOFF 1.0보다 더 나은 압축을 제공하는 TrueType 또는 OpenType 글꼴
3. 트루타입 글꼴(TTF) – 이 글꼴은 1980년대 후반 Apple과 Microsoft에서 개발했습니다.
4. SVG 글꼴/모양 – SVG 글꼴을 사용하면 텍스트를 표시할 때 SVG를 글리프로 사용할 수 있습니다. 이전 버전의 iPhone을 지원하려면 이 형식을 사용해야 합니다.
5. EOT(Embedded OpenType Fonts) – 이 글꼴 파일은 IE에서 작동하지만 다른 브라우저에서는 작동하지 않습니다. 이전 버전의 IE를 지원하려면 이 형식을 사용해야 합니다.

참고: 유럽 연합은 GDPR에 새로운 규칙을 추가하고 있습니다. 웹사이트에서 직접 호스팅되는 Google 글꼴을 사용하는 사람은 누구나 GDPR 규칙을 위반하게 됩니다. 그리고 Google은 해당 웹사이트에 100유로의 벌금을 부과합니다. 따라서 Google 글꼴이 있는 경우 로컬에서 호스팅하거나 고유한 사용자 정의 글꼴을 사용할 수 있습니다.

그러나 Perfmatters 플러그인을 사용하여 웹사이트의 Google 글꼴을 관리할 수도 있습니다. WordPress에서 로컬로 Google 글꼴을 호스팅하는 방법에 대한 문서를 확인하세요.

Elementor 사이트에 글꼴을 추가하는 방법을 알아보려면 아래를 확인하십시오.

WordPress에서 Elementor 기반 웹 사이트에 글꼴을 추가하는 방법

두 가지 간단한 방법으로 사용자 정의 글꼴을 추가할 수 있습니다.

1. 방법 1: 코드를 포함하여 Elementor에 글꼴 추가
2. 방법 2: Elementor의 사용자 정의 글꼴 기능 사용

Elementor를 처음 사용하는 경우 Elementor를 올바르게 사용하는 방법에 대한 이 편리한 블로그를 확인하십시오.

방법 1: 코드를 사용하여 Elementor에 글꼴 추가

수동 프로세스에 따라 Elementor 사이트에 글꼴을 추가하는 방법을 살펴보겠습니다.

• FTP 클라이언트 를 통해 또는 cPanel 을 사용하여 테마 폴더에 새 "글꼴" 폴더를 추가합니다. 새 폴더는 wp-content/themes/fonts 에 있어야 합니다.
• 새 "글꼴" 폴더를 추가했으면 여기에 모든 글꼴 파일을 추가합니다.
• 이제 테마의 스타일시트(style.css)를 열고 다음 코드를 추가합니다.

 @font-face { font-family: 'nameofnewfont'; src: url("/fonts/nameofnewfont.woff2") format("woff2"), url("/fonts/nameofnewfont.woff") format("woff"); font-weight: normal; font-style: normal; }

• 동일한 스타일시트에 추가하여 이 글꼴을 사용할 요소를 구성합니다.
• 이 방법은 초보자에게 고통이 될 수 있습니다. "기울임꼴" 또는 "굵게"와 같은 구성을 추가할 때마다 동일한 프로세스를 거쳐 해당 매개변수를 추가해야 합니다. 많은 코딩이 필요합니다.

이 기술 프로세스를 처리하고 싶지 않은 경우 아래 프로세스에 따라 Elementor 사이트에 사용자 정의 글꼴을 성공적으로 추가할 수 있습니다.

방법 2: Elementor의 사용자 정의 글꼴 기능 사용

사용자 정의 글꼴은 Elementor의 프로 기능입니다. 따라서 웹 사이트에 Elementor(무료) 및 Elementor Pro 플러그인을 모두 설치하고 활성화했는지 확인하십시오.

01단계: 사이트에 사용자 정의 글꼴 추가

먼저 Elementor> 사용자 정의 글꼴 로 이동하십시오.

여기에서 사용자 정의 글꼴을 만들 수 있습니다. 예를 들어 사용자 정의 글꼴 구조를 만들려면 새로 추가 를 클릭합니다.

글꼴에 제목을 지정합니다. 그런 다음 글꼴 변형 추가 를 클릭합니다.

02단계: 글꼴 변형 추가 및 글꼴 파일 업로드

여기에서 글꼴에 몇 가지 추가 옵션을 추가할 수 있습니다. 글꼴 두께, 스타일 및 글꼴 파일과 같은.

TTF 사용자 정의 글꼴 파일을 업로드해 보겠습니다. 이를 위해 업로드 버튼 을 클릭합니다.

장치 또는 찾은 폴더에서 글꼴 파일을 업로드합니다.

참고 : 여기에 업로드하기 전에 선호하는 글꼴 파일을 장치에 보관해야 합니다!

완료되면 여기에서 글꼴 세부 정보를 볼 수 있습니다.

동일한 프로세스에 따라 각 형식에 대해 글꼴 파일 업로드 프로세스를 계속하십시오. 다른 글꼴 변형을 업로드해 보겠습니다. 예를 들어, 글꼴 변형 추가 버튼을 클릭하고 글꼴 두께와 스타일을 설정합니다.

글꼴 두께를 100으로 설정하고 업로드 버튼을 다시 클릭합니다.

파일을 업로드하면 미디어 갤러리에서 추가할 수 있습니다.

03단계: 최종 사용자 정의 글꼴 게시

동일한 프로세스를 수행하여 사이트에 다양한 글꼴 변형을 추가합니다. 완료되면 게시 버튼을 누르 십시오.

04단계: Elementor 디자인에 사용자 정의 글꼴 사용

이제 이 사용자 정의 글꼴을 사용하는 방법에 대해 생각할 수 있습니다. 오른쪽? 이 사용자 정의 글꼴을 찾고 사용하는 방법을 살펴보겠습니다. Elementor 디자인 패널에서 Elementor 페이지를 열어야 합니다. 그런 다음 패널에 텍스트 위젯을 추가합니다.

Elementor 편집 패널에 Heding 위젯 을 추가합니다.

텍스트 위젯(제목)을 추가하면

• 스타일 섹션으로 이동
• 타이포그래피를 클릭하세요
• 그리고 여기에서 방금 생성한 글꼴( My Font )을 찾을 수 있습니다. 글꼴을 선택하면 됩니다.

글꼴을 추가했으면 이제 다른 타이포그래피 옵션을 사용하여 텍스트 또는 글꼴을 더 멋지고 매력적으로 보이게 만들 차례입니다. 글꼴 크기, 두께, 변형, 스타일, 장식, 선 두께 등!

글쎄요, 특별한 디자인은 단순한 디자인보다 고객의 관심을 끌 수 있습니다. 따라서 웹 페이지의 제목을 더 똑똑하고 즐겁게 만들고 싶다면 다음 섹션이 바로 당신을 위한 것입니다. 여기에서는 Happy Addons Animated Text 위젯을 사용하여 제목에 스타일을 지정하는 방법을 보여줍니다.

사용자 지정 Elementor 헤더를 디자인하는 방법을 알아보겠습니다.

해피 애드온 텍스트 애니메이션 위젯으로 글꼴 스타일 지정

애니메이션 텍스트 위젯은 Happy Addons의 프로 기능입니다. 이 멋진 위젯을 사용하여 텍스트를 흥미롭고 매력적으로 만들 수 있습니다. 추가 노력과 어려움을 줄이기 위해 10가지 사전 제작된 디자인 레이아웃이 있습니다. 따라서 Elementor 디자인 패널에 추가한 후에는 올바른 디자인 레이아웃을 선택하고 웹 페이지 구조에 따라 사용자 지정하기만 하면 됩니다.

워드프레스 사이트에서 일반 텍스트나 글꼴 대신 애니메이션 텍스트 위젯을 사용하는 방법을 실제로 살펴보겠습니다.

시작하려면 다음 플러그인을 설치하고 활성화해야 합니다.

1. 엘리멘터 무료
2. 해피 애드온 무료 및 프로

1단계: 애니메이션 텍스트 위젯 추가

먼저 위젯 갤러리에서 위젯을 끌어다 놓습니다.

화면에 위젯의 초기 보기가 표시됩니다.

이전에 만든 사용자 정의 글꼴 텍스트를 사용합니다. 그것을 선택하려면 스타일 버튼, 타이포그래피를 탭하고 내 글꼴 을 선택하십시오.

2단계: 텍스트에 디자인 추가

이제 콘텐츠 섹션을 다시 한 번 탭합니다. 그리고 가장 마음에 드는 디자인을 선택하세요.

디자인을 확인했으면 이제 애니메이션 스타일을 조정할 차례입니다. 그렇게 하려면 콘텐츠 를 클릭하고 애니메이션 유형 을 찾습니다. 각 유형을 하나씩 탐색하여 웹 사이트에 더 나은 결과를 가져옵니다.

참고: 애니메이션 지연(밀리초)입니다. 최소 1000 및 최대 30000.

3단계: 웹페이지에서 애니메이션 텍스트의 최종 출력 보기

글꼴에서 애니메이션 텍스트 위젯을 사용자 정의한 후의 최종 출력을 살펴보겠습니다.

이것이 Happy Addons의 애니메이션 텍스트 위젯이 지루해 보이는 글꼴이나 텍스트를 조정하는 데 도움이 되는 방법입니다. 그러나 이 위젯에 대한 자세한 내용을 보려면 이 위젯의 ​​공식 문서를 확인할 수 있습니다.

또는 더 나은 시각화를 위해 아래 애니메이션 텍스트의 비디오 자습서를 확인할 수 있습니다.

Elementor 사용자 정의 글꼴에 대한 몇 가지 일반적인 질문

Elementor 사용자 정의 글꼴 기능을 탐색할 준비가 되셨습니까?

사용자 정의 글꼴에는 다양한 기능이 있습니다. 고유한 브랜드 스타일 구축에서 더 많은 고객 확보에 이르기까지 사용자 정의 글꼴은 항상 마케팅 담당자, 디자이너 또는 웹 사이트 소유자를 지원합니다. 일반 Google 글꼴을 사용하는 것 외에도 맞춤 글꼴을 사용하면 온라인 비즈니스에서 고유한 스타일과 모양으로 더 많은 고객을 확보할 수 있습니다.

따라서 이 Elementor 튜토리얼 게시물이 WordPress 사이트에서 사용자 정의 글꼴을 현명하게 사용하기 위한 지식을 풍부하게 해주기를 바랍니다. 또한 Happy Addons의 애니메이션 텍스트 위젯을 사용하면 텍스트를 다음 단계로 수정하고 전체 웹사이트 디자인에 가치를 더할 수 있습니다.

이 튜토리얼이 마음에 들면 뉴스레터를 구독하여 WordPress 튜토리얼, Elementor 튜토리얼, 팁 및 트릭, 최신 업데이트와 같은 더 흥미로운 기사를 읽을 수 있습니다!