타이포그래피는 변환이 잘못되었을 때 사람들이 가장 먼저 알아차리는 부분입니다. 여기서는 정확히 무엇이 옮겨지는지, 그리고 변환된 페이지가 테마의 글꼴을 상속할지 원래 글꼴을 유지할지를 결정하는 설정 하나를 설명합니다.
소스에서 읽어 오는 값
모든 제목, 단락, 버튼, 목록에 대해 계산된 값이 캡처됩니다. 글꼴 패밀리, 글꼴 크기, 글꼴 두께, 텍스트 변환, 글꼴 스타일, 텍스트 장식, 줄 높이, 자간입니다. 이 값들은 위젯 자체의 타이포그래피 그룹에 기록되므로, 스타일시트에 묶이지 않고 Elementor에서 각각 편집할 수 있습니다.
크기는 브레이크포인트별로 캡처됩니다. 이는 가변 글꼴 크기에서 중요합니다. clamp() 식으로 작성된 제목은 Elementor에 직접 대응하는 값이 없으므로, 샘플링한 값 세 개(데스크톱, 태블릿, 모바일)가 저장되며 대부분의 디자인에서 곡선을 충분히 가깝게 따라갑니다.
글꼴 옵션: 원래 글꼴 또는 사이트 글꼴
옵션 패널에서 글꼴 처리 방식을 선택합니다.
- HTML 글꼴 및 크기 유지 — 모든 위젯이 소스에서 복사한 명시적인 글꼴 설정을 받습니다. 테마와 관계없이 페이지가 HTML과 똑같이 보입니다.
- 대상 사이트 전역 글꼴 상속 — 위젯별 타이포그래피를 건너뛰고 대신 Elementor의 전역 타이포그래피를 참조합니다. 제목은 사이트의 제목 글꼴을, 본문 텍스트는 본문 글꼴을 따릅니다.
브랜드가 정해진 기존 사이트에 섹션을 가져오면서 자동으로 어울리게 하고 싶다면 두 번째를 사용하세요. 디자인을 충실하게 재현하려면 첫 번째를 사용하세요.
웹 글꼴은 따라오지 않습니다
가장 흔히 놀라는 부분입니다. 글꼴 패밀리 이름은 단지 문자열입니다. 소스 페이지가 외부 스타일시트에서 글꼴을 불러왔다면 그 스타일시트는 WordPress로 옮겨지지 않습니다. 위젯에는 올바른 패밀리 이름이 표시되지만, 사이트에서 그 글꼴을 사용할 수 없으면 브라우저는 시스템 글꼴로 대체합니다.
해결 방법은 두 가지입니다. Elementor에 글꼴을 등록하거나(사이트 설정, 사용자 정의 글꼴), 이미 그 글꼴을 불러오는 테마를 사용하세요. 변환 결과를 판단하기 전에 이 작업을 하세요. 그렇지 않으면 대체 글꼴로 렌더링된 화면을 보면서 존재하지 않는 문제를 쫓게 됩니다.
제목 레벨
제목 태그는 기본적으로 유지되므로 <h2>는 H2로 설정된 제목 위젯이 됩니다. 문서의 제목 레벨을 다시 매기는 시맨틱 모드도 있습니다. 최상위 제목이 H1인 독립 페이지를 이미 H1이 있는 페이지로 가져올 때 유용합니다. 한 페이지에 H1이 두 개 있는 것은 피하는 것이 좋은 SEO 문제 신호입니다.
전체 목록: 여덟 가지 속성, 그 외에는 없음
여기서는 모호하게 말하기보다 정확하게 말하는 것이 더 유용합니다. 무엇을 기대하고 무엇을 다시 작업해야 하는지 정확히 알 수 있기 때문입니다. 위젯의 타이포그래피가 받는 값은 글꼴 패밀리, 글꼴 크기, 글꼴 두께, 텍스트 변환, 글꼴 스타일, 텍스트 장식, 줄 높이, 자간입니다.
CSS 텍스트 모델의 나머지는 Elementor 타이포그래피 그룹에 속하지 않으며 전달되지 않습니다. 텍스트 그림자, 단어 간격, white-space 처리, 하이픈 연결, font-variant, text-indent가 여기에 해당합니다. 디자인이 이 중 하나에 의존한다면 변환 실패가 아니라 수동 작업으로 생각하세요.
글꼴 패밀리 이름은 전달 과정에서 따옴표도 제거되므로, "Helvetica Neue", sans-serif는 Elementor가 하나의 이상한 패밀리 이름으로 취급할 따옴표 문자열이 아니라 Elementor 컨트롤이 받아들이는 형태로 도착합니다.
기본값이 아닌 값만 기록됩니다
여덟 가지 중 네 가지는 기본값일 때 건너뜁니다. 두께 400, 변환 none, 스타일 normal, 장식 none은 명시적으로 기록되지 않고 설정되지 않은 상태로 남습니다.
그 결과 실제로 읽을 수 있는 타이포그래피 패널이 됩니다. 변환된 단락을 열면 다섯 개가 “normal”인 여덟 개 필드 대신, 실제로 결정된 세 가지인 글꼴 패밀리, 크기, 줄 높이가 보입니다. 무언가 설정되어 있다면 의도적으로 설정된 것입니다.
또한 위젯이 상속해야 할 곳에서 제대로 상속한다는 의미이기도 합니다. 명시적인 두께가 없는 단락은 영원히 400에 고정되지 않고 Elementor 전역 설정에서 두께를 계속 상속합니다. 언젠가 본문 글꼴을 일반 두께가 350인 글꼴로 바꿀 때 이 차이가 중요해집니다.
사이트 타이포그래피는 아무것도 기록하지 않습니다
“사이트 타이포그래피 사용”이라는 이름은 값을 옮겨 매핑할 것처럼 들리므로 정확히 짚어 둘 가치가 있습니다. 그렇지 않습니다. 이 모드에서는 타이포그래피 단계가 즉시 종료되고 위젯에 글꼴 설정이 전혀 기록되지 않습니다. 위젯은 전역 타이포그래피에 연결되어 모든 것을 상속합니다.
그래서 사이트 모드로 변환한 섹션은 대상 사이트에 완전히 맞춰지고, 같은 섹션을 원래 모드로 변환하면 전역 글꼴을 바꿔도 꿈쩍하지 않습니다. 어느 쪽이 더 낫다는 것이 아니라 서로 다른 질문에 답하는 것입니다. “내 사이트에 맞춰 줘”라면 앞의 것이, “이 디자인을 정확히 재현해 줘”라면 뒤의 것이 맞습니다.
그래도 확인해야 할 사항
- 모바일 브레이크포인트의 긴 제목 — 근사한 가변 글꼴 크기 때문에 줄 바꿈이 어색해질 수 있습니다.
- 대문자 디스플레이 텍스트의 자간 — 작은 차이도 아주 잘 보입니다.
- 여러 줄 본문의 줄 높이, 특히 소스가 단위 없는 값을 사용한 경우.
- 애초에 위젯별 타이포그래피가 정말 필요한지 — 사이트 타이포그래피로 바꾸면 장기적인 유지 관리가 훨씬 쉬워지는 경우가 많습니다.
- 텍스트 그림자, 단어 간격, 들여쓰기에 의존하는 요소 — 여덟 가지에 포함되지 않으므로 다시 적용해야 합니다.