마스터 애드온
가격
카테고리 보기

글꼴

로이 제미
2026년 9월 17일에 업데이트되었습니다

5분 읽기

글꼴 필드는 마스터 애드온으로 빌드한 사용자 지정 위젯에 글꼴 계열 드롭다운을 추가합니다 위젯 빌더. 편집자는 Elementor 에서 시스템 글꼴 또는 Google 글꼴을 선택하고 위젯은 선택한 요소에 적용합니다. 서체만 변경합니다. 크기,무게 및 선 높이는 CSS 에 유지됩니다.

글꼴은 무료 버전의 위젯 빌더에서 사용할 수 있는 필드 중 하나입니다. 무료 플러그인에는 제한된 위젯 빌더가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.

풀 견적 위젯의 Elementor 글꼴 모음 드롭다운 옆에 있는 Master Addons Widget Builder의 글꼴 필드 설정입니다

Font 필드가 하는 일 #

  • Elementor 에서 위젯의 패널에 검색 가능한 드롭다운을 추가합니다. 목록에는 a 가 있습니다 기본값 옵션, a 시스템 그룹(아리알, 타호마 등) 및 a 구글 그룹.
  • 예를 들어 성을 텍스트로 저장합니다 Playfair Display.
  • a를 씁니다 font-family 아래에 나열한 요소에 대한 규칙입니다 CSS 선택기. 픽이 Google 글꼴인 경우 Elementor 는 해당 글꼴을 페이지에 불러옵니다.
  • 또한 다음과 같은 토큰을 제공합니다 {{ quote_font }}, 성이 인쇄되어 있습니다.

건축업자에게 새로운? 읽기 위젯 빌더 개요 일단 위젯을 열어놓고 돌아오세요.

시작하기 전에 #

  • Elementor가 설치되어 활성화된 WordPress입니다.
  • Elementor 용 마스터 애드온이 설치되고 활성화되었습니다. The 설치 가이드 설정을 다룹니다.
  • 위젯 빌더에서 열린 위젯. 이 가이드의 예는 “인용문 당기기” 위젯입니다: textarea named quote_text라는 이름의 텍스트 필드입니다 quote_author및 라는 이름의 글꼴 필드입니다 quote_font 이는 인용문의 서체를 설정합니다.

글꼴 필드를 추가하는 방법 #

  1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
  2. 를 클릭합니다 스타일 예를 들어 “인용 스타일”과 같은 섹션을 탭하고 추가합니다.
  3. 유형 font 왼쪽의 필드 검색 상자에.
  4. 드래그 글꼴 섹션으로. 필드의 연필을 클릭하여 설정을 엽니다.
Widget Builder에서 글꼴을 검색하여 찾은 글꼴 필드를 인용 스타일 섹션에 추가했습니다

스타일은 편집자가 서체 옵션을 찾을 것으로 예상하는 곳이지만 해당 필드는 콘텐츠 또는 고급 섹션에서도 작동합니다.

글꼴 필드 옵션을 설명했습니다 #

레이블, 이름, 설명 및 Playfair 디스플레이의 기본 값이 포함된 글꼴 필드 옵션입니다
  • 라벨: elementor의 드롭다운 위의 텍스트, 예를 들어 “Quote Font”.
  • 이름: 필드의 고유 ID 및 토큰 이름. 예를 들어 문자,숫자 및 밑줄만 사용합니다 quote_font.
  • 설명: elementor의 드롭다운 아래에 표시된 힌트입니다.
  • 기본값: 위젯의 새 복사본 패밀리는 다음으로 시작합니다. 예를 들어 Elementor 의 목록에 나타나는 이름을 정확히 입력합니다 Playfair Display.

공통 설정에서 찾을 수 있습니다 라벨 표시, 라벨 블록, 분리기 그리고 조건는,다른 분야와 동일하게 동작하는. 이 분야를 동작하게 하는 설정은 CSS 선택기.

CSS 선택기로 글꼴을 적용합니다 #

아래로 스크롤합니다 CSS 선택기 그리고 클릭하세요 항목 추가. 각 행에는 두 개의 상자가 있습니다:

  • CSS 선택기: 글꼴을 얻는 요소. pull quote 에 대한 그것은 .pq-quote. 타자를 칠 필요가 없습니다 {{WRAPPER}}빌더가 이를 추가하고 이 위젯 내부에 규칙을 유지하기 때문입니다.
  • CSS 속성: 작성할 규칙. {{VALUE}} 선택한 가족으로 대체됩니다.
font-family: "{{VALUE}}", Georgia, serif;
CSS 선택기는 글꼴 필드에서 선택기.pq-quote 와 VALUE 자리 표시자를 사용하는 글꼴-패밀리 속성으로 행을 만듭니다

새로운 행은 예제 텍스트로 채워집니다 .text-1, .text-2 그리고 color: {{VALUE}};니다. 둘 다 교체합니다. 나가면 color 속성 상자에서 글꼴 이름이 색상 값으로 끝나고 서체는 변경되지 않습니다.

주변의 인용문 {{VALUE}} playfair Display와 같은 공백으로 이름을 계속 작동합니다. Georgia, serif 는 글꼴이 로드되는 동안 대체입니다. 더 많은 요소를 스타일링하려면 항목 추가 를 다시 클릭하고 다른 행을 추가합니다.

평원을 떠나라 선택기 하단의 상자는 비어 있습니다. 우리의 테스트에서 그것은 썼다 color: Lora; 글꼴을 설정하지 않는 이 필드의 경우.

클릭 설정 저장 다 끝났을 때.

토큰을 CSS 패널에 넣지 않겠습니까? #

토큰은 거기에서 작동합니다. font-family: "{{ quote_font }}", Georgia, serif; 올바른 이름을 인쇄합니다. 문제는 로드 중입니다. 테스트에서 토큰을 통해서만 사용된 Google 글꼴이 프런트 엔드에 로드되지 않았기 때문에 방문자가 대체 글꼴을 보았습니다. CSS Selectors 행은 Elementor 에게 글꼴을 로드하는 데 필요한 정보를 제공하며 동일한 픽이 올바르게 전달되었습니다.

HTML의 클래스나 레이블과 같이 이름이 텍스트로 필요한 위치에 대한 토큰을 보관하세요.

Elementor 에서 글꼴 컨트롤을 사용합니다 #

페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다.Select the widget and open the 스타일 탭. 라벨 아래의 드롭다운을 클릭하고 입력을 시작하여 목록을 필터링합니다. 각 성은 자체 서체로 그려져 있어 선택하기가 더 쉽습니다.

Google 글꼴 그룹에서 Playfair 를 검색하는 Elementor 스타일 탭에서 글꼴 드롭다운을 인용합니다

제품군을 선택하고 미리보기 업데이트를 선택합니다. 게시된 페이지에서 Elementor 는 위젯의 스타일과 함께 Google 글꼴을 로드합니다.

Playfair 디스플레이와 글꼴 필드에 Lora가 선택된 상태로 표시된 프런트 엔드의 따옴표 위젯을 당깁니다

선택 기본값 픽을 지웁니다. 그런 다음 위젯은 해당 요소에 대해 CSS 패널이나 테마가 설정한 글꼴로 돌아가므로 CSS 패널에서 요소에 합리적인 글꼴을 제공합니다.

일반적인 사용 사례 #

  • 인용문 텍스트만 서체를 변경하는 경우 인용문과 사용후기를 가져옵니다.
  • 본문 텍스트만 남기고 영웅 또는 배너 위젯에 제목을 표시합니다.
  • 브랜드 표시 글꼴을 사용하는 가격 번호, 배지 또는 라벨.
  • 편집자가 글꼴을 선택해야 하지만 크기와 간격을 터치해서는 안 되는 클라이언트 사이트입니다.

글꼴 필드와 함께 작업하기 위한 팁 #

  • 스타일링에는 토큰 대신 CSS 선택기를 사용하십시오. 그것이 Google Fonts 를 로드하게 만드는 이유입니다.
  • 항상 fallback stack 을 추가한다 이후 {{VALUE}}와 같은 Georgia, serif 또는 Arial, sans-serif.
  • CSS 패널에 크기와 무게를 넣습니다. 글꼴 필드는 가족만 설정합니다.
  • 크기, 무게 및 간격 조절도 필요하십니까? X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 타이포그래피 분야 은 모두 묶어주는 Pro 필드입니다.
  • 각 Google 글꼴은 다운로드를 추가합니다. 페이지당 2~3가족이 합리적인 한도입니다.

자주 묻는 질문 #

Font 필드는 무료 버전에서 사용할 수 있습니까?

예. 글꼴은 무료 버전의 위젯 빌더에서 사용할 수 있는 필드 중 하나입니다. 위젯 빌더 필드의 전체 세트는 Master Addons Pro 와 함께 제공 됩니다.

Google 글꼴이 라이브 페이지에 표시되지 않는 이유는 무엇입니까?

글꼴이 어떻게 적용되는지 확인합니다. CSS 패널에서 토큰만 인쇄하면 글꼴 파일이 로드되지 않습니다. CSS 선택기 행을 추가합니다 font-family: "{{VALUE}}" 그래서 Elementor가 그것을 로드합니다.

글꼴을 고르는 것이 왜 아무것도 변경되지 않았습니까?

CSS 선택자 행에는 여전히 예제가 있을 수 있습니다 color: {{VALUE}}; 속성, 또는 선택기가 HTML과 일치하지 않습니다. 속성을 다음으로 변경합니다 font-family 그리고 클래스 이름을 확인한다.

선택기에 {{WRAPPER}}를 추가해야 하나요?

아니요. 건축업자가 덧붙입니다 {{WRAPPER}} 선택기 앞에서 글꼴은 이 위젯 내부에만 적용됩니다.

Font 와 Typography 의 차이점은 무엇입니까?

글꼴은 제품군만 설정합니다. 타이포그래피는 하나의 컨트롤에 크기,무게, 줄 높이,문자 간격 등을 추가하는 Pro 필드입니다.

감싸는 #

스타일 섹션에 글꼴 필드를 추가하고 기본 제품군을 설정하고 가리키는 CSS 선택기 행을 추가합니다 font-family: "{{VALUE}}" 요소에서. 편집자는 Elementor 에서 검색 가능한 글꼴 목록을 얻고 Google 글꼴은 추가 코드없이 페이지에로드됩니다. 전체 텍스트 스타일링은 다음을 참조하십시오 타이포그래피 분야, 그리고 확인 가격 각 계획에 포함된 내용입니다.

당신의 감정은 무엇입니까