WebFonter: 모든 웹사이트에서 FontShop 글꼴 미리보기 - 지금 바로 사용 가능한 글꼴

WebFonter는 FontShop에서 제공하는 글꼴을 구매하기 전에 웹사이트에서 직접 글꼴을 미리 볼 수 있는 브라우저 도구였습니다. 디자이너는 정적인 샘플 이미지만 보고 판단하는 대신, 제목과 본문 내용을 바로 수정해 볼 수 있었습니다. 하지만 이제 이러한 원래의 작업 방식은 과거의 이야기가 되었습니다. FontShop의 온라인 스토어는 2023년에 폐쇄되었고, 이전 WebFonter 주소는 설치 도구가 아닌 FontShop 정보 페이지로 연결됩니다. MyFonts를 통해 글꼴을 미리 보고 브라우저 개발자 도구에서 웹사이트의 타이포그래피를 시험해 볼 수는 있습니다.

WebFonter를 아직 설치할 수 있나요?

이전 WebFonter 설치 지침을 참고하지 마십시오. Monotype의 공식 플랫폼 종료 FAQ 에 따르면 FontShop.com 상거래 플랫폼은 2023년 12월 15일 에 서비스가 종료되었습니다 . 기존 WebFonter 웹 주소는 이제 FontShop 정보 페이지로 연결되며, 해당 페이지에서 MyFonts로 안내됩니다. 현재 지원되는 WebFonter 확장 프로그램이나 북마크릿은 확인되지 않았습니다. 따라서 이전 Chrome 확장 프로그램 및 북마크릿 설치 지침은 제품 작동 방식에 대한 기록으로만 간주해야 하며, 현재 사용 가능한 설치 가이드로 여겨서는 안 됩니다.

WebFonter가 원래 했던 일

이 도구의 가장 큰 장점은 실제 환경에서 서체를 확인할 수 있다는 점이었습니다. 디자이너는 별도의 폰트 샘플을 열어보는 대신, 실제 페이지를 보면서 레이아웃을 그대로 유지한 채 서체를 변경할 수 있었습니다.

1. 웹사이트를 엽니다. 원래 이 도구는 크롬 확장 프로그램과 다른 브라우저용 북마크릿으로 제공되었습니다. 글꼴 서비스에 접속할 수 있는 경우 라이브 사이트와 로컬 호스팅 사이트 모두에서 사용할 수 있다고 설명되었습니다.
2. 글꼴 패밀리를 선택하세요. '패밀리 변경' 컨트롤 을 사용하면 FontShop 카탈로그 내에서 글꼴을 찾아보고 검색할 수 있습니다. 패밀리를 선택하면 페이지 미리보기가 업데이트됩니다.
3. 스타일을 지정하고 조정할 수 있습니다. 원래 인터페이스는 제목과 본문 텍스트로 시작하여 다른 대상을 추가할 수 있었고, 크기, 줄 간격 및 간격을 조정하는 '조정' 컨트롤을 제공했습니다.

이는 과거 기능 설명이며, 현재 확정된 메뉴가 아닙니다. 일부 오래된 리뷰에서는 웹폰트 컨트롤을 숨기는 단축키로 Ctrl+H 를 언급하기도 했지만 , 최신 브라우저에서는 이 방법을 사용하지 않는 것이 좋습니다. Ctrl+H는 페이지나 도구가 자동으로 차단하지 않는 한 일반적으로 검색 기록을 엽니다.

오늘날 웹사이트에서 FontShop 서체를 테스트하는 방법

FontShop의 FontFont 컬렉션은 이제 공식 FontShop 정보 페이지 와 MyFonts를 통해 제공됩니다 . 이 방식은 글꼴 검색과 페이지 내 테스트를 분리하며, 기존 WebFonter와 달리 FontShop에서 웹사이트로 바로 미리보기를 할 수 있는 원클릭 방식이 아닙니다.

1. 원하는 단어를 입력하여 글꼴을 미리 보세요.

MyFonts에서 마음에 드는 글꼴 패밀리를 찾아보세요. 해당 글꼴 패밀리 또는 개별 스타일 미리보기에서 프로젝트의 제목, 탐색 레이블 또는 단락을 입력해 보세요. MyFonts FAQ 에 따르면 미리보기 크기와 색상을 조정하고 지원되는 OpenType 기능을 확인할 수 있습니다. 앨범 기능을 사용하면 여러 글꼴을 나란히 놓고 비교해 볼 수 있습니다. 다양한 굵기를 확인해 보세요. 보기 좋은 디스플레이 글꼴이라도 긴 단락에는 불편할 수 있습니다.

2. 변경하려는 텍스트를 검사합니다.

Chrome에서 웹사이트를 열고 제목이나 단락을 마우스 오른쪽 버튼으로 클릭한 다음 '검사'를 선택하세요 . '요소' 패널에는 선택한 HTML 노드가 표시되고, '스타일' 패널에는 해당 노드에 적용되는 CSS가 나열됩니다. 요소 선택 도구를 사용하여 페이지의 텍스트를 선택할 수도 있습니다. 자세한 사용법은 Google의 검사 모드 가이드를 참조하세요.

3. 일시적으로 타이포그래피를 시험해 보세요.

[요소] → [스타일] 에서 기존 [글꼴 패밀리] 선언을 편집하거나 선택한 요소에 새 글꼴 패밀리를 추가하세요. 예를 들어, 로컬에서 사용 가능한 세리프 방향의 대용으로 [Georgia, serif]를 테스트해 보고 , [글꼴 크기] , [줄 높이] 또는 [자간]을 변경해 보세요 . 변경 사항 은 일반적 으로 즉시 표시되지만 게시된 사이트에는 영구적으로 적용되지 않습니다. Google은 개발자 도구 CSS 참조 에서 이러한 컨트롤에 대해 설명합니다 .

중요: CSS에 상용 폰트 이름을 입력한다고 해서 해당 폰트가 자동으로 다운로드되거나 로드되는 것은 아닙니다. 페이지에서 실제 상용 폰트의 모양을 보려면, 적절한 라이선스가 있는 폰트 리소스를 통해 해당 폰트가 이미 로드되어 있거나, 허용된 로컬 설치 환경에 있어야 합니다. 그렇지 않으면 브라우저에서 대체 폰트가 표시됩니다. 대체 폰트 미리보기를 구매하려는 폰트로 오해하지 마십시오.

4. 배포하기 전에 라이선스를 확인하세요.

무료 스토어프론트 미리보기는 공개 웹사이트에 폰트 파일을 호스팅할 수 있는 라이선스가 아닙니다. MyFonts는 웹폰트가 @font-face를 통해 임베드 되며 적절한 웹폰트 라이선스가 필요하다고 설명합니다. 허용되는 도메인과 페이지뷰 조건은 해당 제품에 제공되는 라이선스에 따라 다릅니다. 파일을 실제 웹사이트에 추가하기 전에 폰트 패밀리의 라이선스 정보와 구매 약관을 검토하십시오. 데스크톱 라이선스만으로는 웹 임베드가 허용되지 않습니다.

최종 글꼴을 선택하기 전에 확인해야 할 사항

• 제목 맞춤: 데스크톱 및 모바일 화면 너비에서 제목이 자연스럽게 줄 바꿈되나요?
• 본문 가독성: 글자 크기, 줄 간격, 단락 밀도가 읽기 편한가요?
• 글꼴 굵기 및 문자: 필요한 굵게, 기울임꼴, 구두점 및 언어 기호가 모두 사용 가능한가요?
• 실제 로딩: 실제 얼굴이 표시되는 건가요, 아니면 브라우저의 대체 이미지인가요?
• 라이선스: 구매하신 플랜이 웹사이트 사용을 포함합니까?

변경 사항이 아무런 효과를 나타내지 않는다면, 더 구체적인 CSS 규칙이 편집 내용을 덮어쓰는지, 글꼴이 실제로 로드되었는지, 그리고 올바른 페이지 요소를 선택했는지 확인하십시오. 여러 뷰포트 너비에서 테스트해 보는 것도 좋습니다. WebFonter의 원래 장점은 즉각적인 맥락 파악이었지만, 오늘날에는 MyFonts 샘플과 DevTools의 임시 편집 내용을 결합하여 단종된 도구를 여전히 사용할 수 있다고 주장하지 않고도 정보에 기반한 타이포그래피 선택을 할 수 있는 실용적인 방법을 제공합니다.