웹사이트에서 어떤 글꼴을 사용하고 있는지 확인하는 방법

웹 사이트에서 본 글꼴에 완전히 빠져본 적이 있다면 자신의 콘텐츠에서 사용할 수 있도록 글꼴 이름을 찾는 방법이 궁금했을 것입니다. 양질의 타이포그래피는 방문자의 읽기 경험을 향상시킬 수 있으므로 찾으려고 노력할 가치가 있습니다. 웹사이트에서 어떤 글꼴이 사용되는지 확인하는 이유에 관계없이 도움이 될 수 있는 도구가 많이 있습니다.

이 기사에서는 웹 사이트에서 어떤 글꼴을 사용하고 있는지 확인해야 하는 이유에 대해 설명합니다. 방법도 알려드리겠습니다.

시작하자!

YouTube 채널 구독

웹사이트에서 어떤 글꼴을 사용하고 있는지 확인해야 하는 이유

이미 언급했듯이 아름답고 읽기 쉬운 글꼴은 사이트의 사용자 경험(UX)과 가독성을 향상시킬 수 있습니다. 또한 방문자가 콘텐츠를 해독하는 데 어려움을 겪지 않고도 편안하게 콘텐츠에 참여할 수 있습니다. 텍스트가 세련되지만 읽을 수 없는 경우 독자는 귀하의 자료를 이해하거나 감상하는 데 어려움을 겪을 것입니다.

클릭 유도문안(CTA) 버튼은 텍스트를 읽을 수 없는 경우 거의 쓸모가 없는 것으로 판명될 수도 있습니다. 그렇기 때문에 스타일리시하고 가독성이 좋은 글꼴 목록을 유지하는 것이 편리할 수 있습니다. 그런 다음 나중에 사이트나 클라이언트에서 사용할 수 있습니다.

웹사이트에서 어떤 글꼴을 사용하고 있는지 확인하는 방법(3가지 사용 가능한 방법)

웹 사이트에서 사용 중인 글꼴을 확인하는 데 사용할 수 있는 여러 가지 방법이 있습니다. 브라우저의 검사 기능은 탁월한 솔루션이지만 동일한 효과를 낼 수 있는 확장 기능이 있습니다. 온라인 도구를 사용하여 이미지에서 글꼴을 찾을 수도 있습니다. 각 옵션을 살펴보겠습니다.

1. 브라우저 검사기 도구를 사용하여 글꼴 식별

웹사이트에서 어떤 글꼴을 사용하고 있는지 확인하는 가장 쉬운 방법 중 하나는 브라우저의 검사기 도구를 사용하는 것입니다. 이 예에서는 Chrome Inspector로 작업하지만 다른 브라우저에도 동일한 기능이 있다는 점은 주목할 가치가 있습니다.

먼저 찾고자 하는 글꼴이 포함된 웹페이지를 마우스 오른쪽 버튼으로 클릭합니다. 결과 메뉴에서 검사를 선택합니다 .

키보드 단축키를 사용하려는 경우 Windows 또는 Linux의 경우 Ctrl+Shift+I 를 시도합니다. Mac을 사용하는 경우 동등한 기능은 Cmd+Shift+I입니다.

화면 오른쪽에 있는 창에서 확인하려는 글꼴을 사용하여 텍스트를 찾습니다. 해당 HTML 요소를 선택하면 강조 표시됩니다.

그런 다음 계산됨 탭을 클릭하고 "글꼴 패밀리"를 검색합니다.

여기에 나열된 글꼴 이름과 스타일이 표시되어야 합니다.

글꼴과 관련된 CSS를 보려면 스타일 탭 아래를 보십시오. 스크롤하여 글꼴 관련 값을 검색할 수 있습니다. 그러나 여기에 재정의 및 관련 없는 스타일 규칙이 있을 수 있으므로 일반적으로 계산됨 탭이 더 유용합니다.

2. 브라우저 확장을 통해 글꼴 찾기

브라우저 확장은 특히 Inspector에 익숙하지 않은 경우 웹 사이트에서 글꼴 세부 정보를 찾는 더 간단한 방법을 제공할 수 있습니다. 또한 일반적으로 원하는 작업으로 돌아갈 수 있도록 원하는 답변을 더 빨리 제공할 수 있습니다.

이러한 추가 기능에는 다음이 포함됩니다.

• Fontanello: 무료로 사용할 수 있는 이 확장 프로그램을 사용하면 탐색하는 동안 글꼴을 강조 표시하고 마우스 오른쪽 버튼으로 클릭하여 글꼴 이름, 두께, 스타일 등을 쉽게 찾을 수 있습니다.
• WhatFont: 글꼴 감지를 더욱 간소화하는 WhatFont를 사용하면 글꼴 위로 마우스를 가져가는 것만으로 글꼴 이름을 볼 수 있습니다.
• CSS Peeper: 웹 디자이너를 염두에 두고 제작된 이 확장 기능은 좀 더 강력하며 웹 페이지의 CSS 코드에서 추가 세부 정보를 알려줄 수 있습니다.

그러나 이러한 각 확장에는 다양한 브라우저 지원이 있습니다. WhatFont는 Firefox, Chrome, Safari 및 Internet Explorer에서 사용할 수 있습니다. 반면 Fontanello는 Firefox 및 Chrome에서만 사용할 수 있습니다. CSS Peeper는 다른 플랫폼에서는 사용할 수 없는 Chrome 전용 도구입니다.

특정 글꼴의 이름을 빠르게 찾으려면 WhatFont가 가장 사용하기 쉬운 옵션입니다. 또한 대부분의 브라우저를 지원하므로 빠른 시연에 사용할 것입니다.

WhatFont를 설치하면 브라우저의 툴바에서 활성화하고 일부 텍스트에 마우스를 가져가면 웹사이트에서 사용 중인 글꼴을 확인할 수 있습니다.

처음 텍스트 위로 마우스를 가져가면 글꼴 이름만 표시됩니다. 그러나 이름을 클릭하면 크기, 무게, 색상 및 선 높이와 같은 세부 정보가 포함된 확장된 팝업이 표시됩니다. Typekit 또는 Google Fonts를 통해 서체를 사용할 수 있는지 여부도 식별할 수 있습니다.

글꼴 세부 정보 확인이 끝나면 브라우저 창의 오른쪽 상단에 있는 WhatFont 종료 버튼을 사용하여 도구를 종료할 수 있습니다.

3. 이미지에서 글꼴 감지

마지막으로 이미지에 사용된 글꼴을 볼 수도 있습니다. 여기에는 로고나 인포그래픽에서 본 서체가 포함됩니다. 글꼴 감지기에 대한 경험에 따르면 WhatTheFont는 이 작업에 가장 효과적인 온라인 도구입니다.

WhatTheFont를 사용하려면 해당 이미지를 업로드하고 관련 글꼴이 있는 섹션을 선택해야 합니다.

그런 다음 정확히 일치하지 않더라도 식별하려는 글꼴과 유사한 여러 글꼴이 있는 결과 페이지를 반환합니다.

글꼴의 출처와 인기도에 따라 성공률이 달라질 수 있습니다. 서체의 정확한 이름이 매우 중요하다면 원하는 것을 제공하는 도구를 찾기 어려울 수 있습니다.

그러나 이미지에서 찾은 글꼴과 유사한 글꼴을 사용하려는 경우 온라인 감지기가 필요에 적합해야 합니다.

결론

시각적으로 매력적이고 읽기 쉬운 글꼴은 웹사이트 방문자의 읽기 경험을 향상시킬 수 있습니다. 이렇게 하면 사이트나 클라이언트에서 사용할 수 있는 새로운 서체를 계속 주시하라는 메시지가 표시될 수 있습니다. 웹사이트에서 어떤 글꼴을 사용하고 있는지 확인하려는 이유와 상관없이 도움이 될 수 있는 많은 도구가 있습니다.

이 게시물에서 우리는 웹사이트에서 어떤 글꼴을 사용하고 있는지 확인하는 세 가지 방법에 대해 논의했습니다.

1. 브라우저 검사기 도구를 사용하여 글꼴을 식별합니다.
2. WhatFont와 같은 브라우저 확장을 사용하여 글꼴을 찾으십시오.
3. WhatTheFont를 사용하여 이미지에서 글꼴을 감지합니다.

웹사이트에서 어떤 글꼴이 사용되었는지 확인하는 방법에 대해 궁금한 점이 있습니까? 아래 의견 섹션에서 알려주십시오!

이미지 제공: rudall30 / shutterstock.com