Shopify 글꼴 탐지기: 스토어 테마 글꼴 찾기

Shopify 글꼴 탐지기로 실제로 알 수 있는 것

Shopify 글꼴 탐지는 하나의 버튼이 아닙니다. 관리자 접근 권한, 테마 편집기, 공개 페이지의 코드, 이미지 중 무엇을 갖고 있는지에 따라 방법이 달라집니다. Shopify는 자체 라이브러리, 시스템 글꼴, 외부 서비스, 테마 파일을 사용할 수 있으므로 출처마다 남는 증거도 다릅니다. Shopify 글꼴 탐지기 결과는 설정과 실제 렌더링을 나누어 기록해야 합니다.

스토어를 관리한다면 테마 편집기부터 확인하세요. 제목과 본문은 서로 다른 패밀리를 사용할 수 있고, 특정 섹션이 전체 설정을 덮어쓸 수도 있습니다. 이름뿐 아니라 굵기와 스타일도 기록해야 합니다.

다른 스토어를 확인할 때는 공개 HTML과 CSS에서 계산된 font-family, 크기, 굵기, 줄 높이와 대체 글꼴을 읽을 수 있습니다. 이는 스크린샷만 비교하는 것보다 정확한 경우가 많습니다.

로고, 배너, 상품 사진, 소셜 이미지처럼 글자가 이미지로 평면화된 경우에는 이미지 탐지가 유용합니다. 하지만 후보를 제시할 뿐 테마가 실제로 그 글꼴을 쓴다는 증거는 아닙니다. 글자 형태, 굵기, 자간과 라이선스를 다시 확인하세요. Shopify 글꼴 탐지기는 이 후보를 정리하는 데 도움을 줍니다.

좋은 결과는 검증 가능해야 합니다. 이름의 출처, 적용된 요소, 실제로 내려받은 글꼴, 재사용 권한을 나누어 확인하면 비슷해 보인다는 이유만으로 잘못된 제작 결정을 내리지 않게 됩니다. Shopify 글꼴 탐지기 결과에는 URL과 확인 날짜도 남기세요.

Shopify 테마 편집기에서 글꼴 확인하기

현재 테마에서는 전체 글꼴 설정이 보통 테마 설정에 있습니다. 테마에 따라 이름이 다를 수 있고, 섹션이나 블록에 더 구체적인 규칙이 있을 수 있습니다.

변경하기 전에 내비게이션, 상품 제목, 본문, 버튼, 가격, 푸터를 살펴보세요. 하나의 스토어도 역할별로 다른 패밀리를 사용할 수 있습니다.

복제한 테마나 초안에서 테스트하세요. 글꼴을 바꾸면 줄바꿈, 카드 높이, 메뉴 폭과 첫 화면에 보이는 콘텐츠가 달라집니다. 모바일에서도 확인해야 합니다.

목록에 없는 글꼴을 추가하려면 배포 조건과 로딩 방법을 먼저 확인하세요. 공개된 파일 URL이 재사용 권한을 뜻하지는 않습니다.

1. 관리자에서 온라인 스토어와 테마를 열고 원하는 테마의 사용자 지정을 선택합니다.
2. 테마 설정을 열고 타이포그래피 또는 글꼴 항목을 찾습니다.
3. 제목과 본문을 나누어 패밀리, 스타일, 굵기와 크기를 기록합니다.
4. 상품 페이지와 컬렉션 페이지에서 섹션별 예외가 있는지 확인합니다.
5. 필요한 문자와 모바일 줄바꿈을 점검한 후 저장합니다.

공개된 Shopify 스토어 검사하기

관리자에 접근하지 못해도 공개 스토어에는 확인할 정보가 있습니다. 글꼴 로딩을 기다린 뒤 필요한 템플릿을 여세요. 홈, 상품, 블로그는 서로 다른 규칙을 가질 수 있습니다.

상품 제목처럼 실제 HTML 텍스트를 선택하고 오른쪽 버튼으로 Inspect를 엽니다. Computed에서 font-family, font-size, font-weight, font-style을 검색하세요.

첫 번째 패밀리가 우선이지만 글리프가 없거나 다운로드가 실패하면 대체 글꼴이 사용될 수 있습니다. Styles 패널에서 선택자와 CSS 파일을 추적할 수 있습니다.

제목, 문단, 버튼, 가격에서도 반복해 확인하세요. 확장 기능은 수집을 빠르게 하지만 Fonts 보기와 Network 패널이 실제 렌더링을 확인하는 데 더 유용합니다.

1. 공개 URL을 열고 텍스트와 웹 글꼴 로딩이 끝날 때까지 기다립니다.
2. 텍스트 노드를 Inspect하고 이미지가 아닌지 확인합니다.
3. Computed에서 전체 font-family 스택과 일반 대체 글꼴을 복사합니다.
4. 굵기, 스타일, 줄 높이와 크기를 읽어 시각적 차이를 설명합니다.
5. 브라우저에 Fonts 보기가 있으면 선택된 글리프에 사용된 글꼴을 확인합니다.

렌더링된 글꼴 확인

CSS 선언은 의도일 뿐 모든 문자가 같은 글꼴로 그려진다는 증거는 아닙니다. 특징적인 문자, 숫자와 다른 문자 체계를 비교하고 대체 글꼴을 따로 기록하세요.

사용자 지정 글꼴과 파일 다루기

Shopify 테마는 WOFF 또는 WOFF2 사용자 파일을 불러올 수 있습니다. @font-face에서 파일명과 다른 패밀리 이름을 지정할 수 있으므로 파일명만 보고 판단하면 안 됩니다.

Network 패널에서 Font로 필터링해 실제 다운로드를 확인하세요. 굵기와 기울임마다 다른 파일을 쓸 수 있습니다. Liquid 필터와 base.css, theme.css 또는 섹션 규칙이 전체 설정을 덮어쓸 수도 있습니다.

내 스토어에서는 지원되는 설정을 우선 사용하세요. 파일을 추가한다면 라이선스, 형식, 굵기, 스타일, Unicode 범위와 로딩 비용을 기록합니다. 공개 URL이 글꼴 복사 권한을 주지는 않습니다.

• 패밀리와 파일: @font-face, 선택자와 파일명을 비교하세요. 서로 다를 수 있습니다.
• 굵기와 스타일: 400, 500, 600, 700, 기울임과 가변 축을 확인하세요.
• Unicode 범위: 필요하면 악센트, 아랍어, 일본어와 한국어를 실제로 테스트하세요.
• 로딩과 권리: 허용된 출처를 사용하고 네트워크 비용을 측정하세요.

Shopify 글꼴 식별 방법 선택하기

가장 빠른 방법은 가진 증거에 따라 달라집니다. 표에서 시작점을 정하고 실제 스토어에서 다시 확인하세요.

신뢰할 수 있는 Shopify 글꼴 확인 절차

먼저 증거의 종류를 이름 붙이세요. 테마 설정, 라이브 CSS, 로드된 파일, 이미지 중 무엇인가요? 다음으로 역할과 페이지를 기록해 배너 글꼴을 본문 글꼴로 착각하지 않도록 합니다.

중요한 결정이라면 두 가지 방법으로 확인하세요. 공개 스토어는 Computed와 Fonts 또는 Network를 함께 보고, 내 스토어는 설정과 상품·컬렉션 페이지를 비교합니다. 출처와 결과가 일치하는 것이 단일 이름보다 중요합니다.

마지막으로 식별과 대체를 구분하세요. 원래 글꼴을 사용할 수 없다면 같은 굵기, 크기, 자간, 줄 길이로 후보를 비교하고 CSS 스택과 선택한 대체 글꼴을 전달 문서에 남깁니다.

결과를 기록할 때는 확인한 URL과 날짜, 선택한 요소의 역할, 사용한 브라우저와 대체 글꼴 여부도 남기세요. 이 메모가 있으면 테마가 업데이트된 뒤에도 같은 검사를 반복할 수 있고, 디자이너와 개발자가 서로 다른 글꼴 이름을 전달하는 문제를 줄일 수 있습니다.

페이지마다 결과가 다르면 어느 템플릿에서 어떤 선택자가 우선했는지 표시하세요. 데스크톱과 모바일에서 같은 문장을 다시 확인하고, 캐시를 지운 뒤에도 파일 요청과 실제 글리프가 같은지 비교하면 일시적인 표시 상태를 확정된 테마 설정으로 오해하지 않을 수 있습니다.

• 1. 증거 이름 붙이기: 설정, 계산된 CSS, 파일 또는 시각적 유사성인지 기록합니다.
• 2. 역할 나누기: 제목, 본문, 내비게이션, 버튼, 가격과 카드를 따로 확인합니다.
• 3. 렌더링 확인: 특징적인 문자와 실제 문장을 비교하고 대체 글꼴을 찾습니다.
• 4. 제작 조건 확인: 언어, 라이선스, 성능, 줄바꿈과 필요한 굵기를 봅니다.
• 5. 판단 문서화: 스택, 선택자, 역할, 날짜와 대체 결정을 저장합니다.

일반적인 실수와 한계

탐지기는 검색을 줄여 주지만 출처와 제작 검사를 대신하지 않습니다.

• 홈만 확인하기: 상품과 블로그 템플릿은 다른 패밀리를 사용할 수 있습니다.
• 첫 CSS 이름을 확정하기: 글리프 부족이나 네트워크 실패로 대체 글꼴이 쓰일 수 있습니다.
• 로고를 HTML 텍스트로 보기: PNG, 윤곽선 SVG와 canvas에서는 원래 글꼴을 알 수 없습니다.
• 굵기와 자간 무시하기: 400과 700, 다른 자간은 인상을 크게 바꿉니다.
• 권한 없이 복사하기: 공개 URL은 파일 재사용 권리를 주지 않습니다.
• 모바일을 건너뛰기: 데스크톱에서 맞는 글꼴이 작은 화면에서 줄바꿈과 속도 문제를 만들 수 있습니다. 실제 휴대전화에서 메뉴, 상품 카드, 버튼과 긴 제목을 차례로 확인하고 느린 네트워크에서도 글자가 늦게 나타나지 않는지 살펴보세요. 또한 확대 비율과 운영체제별 글꼴 표시 차이를 기록하면 최종 CSS 조정에 도움이 됩니다.