웹사이트에서 글꼴을 식별하는 방법

다른 사이트, 이미지 또는 블로그에서 웹사이트에 적합한 글꼴을 찾았지만 이름을 찾는 방법을 몰랐습니까? 당신은 바로 이곳에 왔습니다. 이 가이드에서는 웹사이트에서 글꼴을 식별하여 비즈니스에 가장 적합한 타이포그래피를 찾는 방법을 보여줍니다.

웹사이트에서 사용하는 글꼴을 확인하는 것이 왜 유용한가요?

웹사이트를 구축하거나 온라인 콘텐츠를 디자인하는 중이라면 항상 웹사이트를 개선할 방법을 찾고 있습니다. 여러 가지 방법으로 할 수 있습니다. 가장 분명한 것은 다른 테마를 사용하고 기능을 추가하고 더 나은 콘텐츠를 제공하는 것입니다. 그러나 경쟁자보다 우위를 점하고 사이트를 독특하게 만들기 위해 할 수 있는 또 다른 명확하지 않은 일이 있습니다. 글꼴 도 그 중 하나입니다.

사용하는 글꼴은 사이트 전체에 있으며 가독성을 향상시킬 뿐만 아니라 전체 탐색 기능 을 향상시킬 수 있습니다. 타이포그래피가 전문적으로 보이고 읽기 쉽다면 방문자가 사이트에 머무를 가능성이 높아집니다. 글꼴은 종종 간과되지만 큰 영향을 미칠 수 있습니다.

사이트에 글꼴을 추가할 수 있지만 기존 방식으로는 찾을 수 없는 타이포그래피를 사용하고 싶을 수 있습니다. 인터넷은 귀하의 사이트에서 사용할 수 있는 아름다운 활자체로 된 웹사이트로 가득합니다. 그러나 어려운 부분은 해당 웹 사이트에서 사용하는 글꼴을 식별하는 것입니다. 글꼴을 찾는 쉬운 방법은 없으며 전문가라고 해도 글꼴마다 미세한 차이가 많이 있습니다. 또한 이러한 차이점은 글꼴 스타일 및 CSS 변경으로 인해 증폭될 수 있습니다.

그렇기 때문에 이 게시물에서는 다양한 도구를 사용하여 웹사이트에서 사용하는 글꼴을 찾는 방법을 보여 드리겠습니다.

웹사이트에서 글꼴을 식별하는 방법

웹사이트에서 글꼴을 식별하는 방법에는 여러 가지가 있습니다.

1. 검사 도구 사용
2. 플러그인 포함
   1. FFFF대체
   2. 세례반
   3. 폰타넬로
   4. 어떤 글꼴

이들 중 일부는 다른 것보다 사용하기가 더 어렵고 일부는 외부 도구 및 확장이 필요할 수 있습니다. 이 모든 다양한 방법을 자세히 살펴보겠습니다.

1) 검사 도구를 사용하여 글꼴 식별

웹사이트에서 글꼴을 식별하는 가장 기본적인 방법은 브라우저의 검사 도구 를 사용하는 것입니다. 이를 위해서는 브라우저의 개발자 도구를 열어야 합니다. 일반적으로 다음과 같은 몇 가지 방법으로 이 작업을 수행할 수 있습니다.

• 브라우저에서 F12 또는 Ctrl+Shift+I 누르기
• 브라우저 메뉴를 열고 마우스 오른쪽 버튼을 클릭한 다음 검사 로 이동합니다.
• 브라우저 메뉴에서 개발자 도구 옵션을 열고 웹 개발자 로 이동

마음에 드는 글꼴을 찾으면 식별하려는 글꼴이 포함된 텍스트를 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 클릭합니다.

이 요소는 인스펙터 도구에서 강조 표시되고 인스펙터 옆의 상자에서 스타일과 레이아웃을 볼 수 있습니다.

그런 다음 계산 됨 탭을 클릭하고 아래로 스크롤하여 글꼴 모음 필드를 확인합니다. 이 필드는 웹사이트의 글꼴을 나열해야 합니다. 예를 들어, 이 예에서 글꼴은 Roboto 또는 SF-Pro Display입니다.

이렇게 하면 Inspector 도구를 사용하여 모든 웹사이트에서 글꼴을 식별할 수 있습니다. 그러나 허용하지 않기 때문에 검사기 도구를 마우스 오른쪽 버튼으로 클릭하거나 액세스할 수 없는 사이트를 찾을 수 있습니다. 그렇다면 다른 대안이 있습니다. 전용 도구를 사용하여 웹 사이트에서 사용하는 글꼴도 확인할 수 있습니다.

웹사이트에서 글꼴을 식별하는 데 사용할 수 있는 최고의 플러그인을 살펴보겠습니다.

2) 도구 및 플러그인을 사용하여 글꼴 식별

웹사이트에서 인스펙터 도구를 사용할 수 없는 경우 전용 도구와 플러그인을 사용하여 글꼴을 식별합니다. 세상에는 몇 가지 도구가 있으므로 보다 쉽게 ​​사용할 수 있도록 최고의 도구를 나열하고 이 도구를 사용하여 다양한 사이트에서 사용되는 글꼴을 찾고 인식하는 방법을 보여드리겠습니다.

2.1) FFFF폴백

FFFFallback 은 모든 웹사이트에서 글꼴을 식별하는 데 사용할 수 있는 간단한 책갈피 도구입니다. 그리고 가장 좋은 점은 아무것도 설치할 필요가 없다는 것입니다. 책갈피 탭에 책갈피를 저장하고 글꼴을 확인하려면 사이트에서 책갈피를 클릭하기만 하면 됩니다. 이 도구는 Javascript를 사용하여 CSS를 스캔하고 글꼴 스타일과 함께 타이포그래피를 식별합니다.

이 도구를 사용하려면 이 페이지를 열어야 합니다. 그런 다음 FFFFALLBACK 버튼을 클릭하고 아래와 같이 책갈피 막대로 끕니다 . 책갈피 막대가 브라우저에 표시되지 않으면 Ctrl+Shift+B 를 눌러 활성화하십시오.

이제 글꼴을 식별할 웹사이트를 열고 책갈피 막대에 방금 저장한 책갈피 를 클릭하십시오. 아래와 같이 새 열에 웹사이트의 글꼴 모음과 스타일이 표시되어야 합니다. 상단의 옵션으로 웹 글꼴 을 선택했는지 확인하십시오.

2.2) 분수

Fount는 FFFFALLBACK과 비슷하지만 특정 텍스트의 글꼴도 확인할 수 있습니다. 이런 식으로 글꼴을 검사할 텍스트를 지정할 수 있습니다.

Fount를 사용하려면 이 사이트로 이동하여 웹사이트에서 Bookmarklet 을 Bookmarks 탭으로 끌어서 저장하십시오.

그런 다음 글꼴을 확인하려는 웹 사이트를 열고 Found 책갈피를 클릭합니다. 커서가 더하기로 변경됩니다. 아무 텍스트나 클릭하기만 하면 화면 오른쪽 상단에 식별된 글꼴이 표시됩니다.

해당 텍스트의 글꼴을 알고 나면 글꼴 상자 를 다시 클릭하여 커서를 비활성화하고 평소와 같이 페이지를 계속 탐색할 수 있습니다.

2.3) 폰타넬로

브라우저 확장 프로그램을 선호하는 경우 Fontanello는 모든 웹사이트에서 글꼴을 식별할 수 있는 완벽한 도구입니다. Chrome 또는 Firefox에 Fontanello 확장 프로그램을 설치하고 활성화하기만 하면 됩니다.

사이트에서 글꼴을 식별하려면 텍스트를 마우스 오른쪽 버튼으로 클릭 하고 Fontanello 옵션을 선택하기만 하면 됩니다. 드롭다운 메뉴에는 글꼴 모음과 해당 스타일 및 변형이 표시됩니다.

2.4) 어떤 글꼴

또는 유사한 방식으로 WhatFont 확장을 사용할 수 있습니다. 먼저 Chrome 또는 Firefox에 확장 프로그램을 설치합니다. 그런 다음 브라우저의 도구 모음에서 WhatFont 도구 아이콘을 클릭하고 텍스트를 클릭하여 글꼴을 확인합니다. 좋은 점은 다른 텍스트를 선택하고 동시에 사용하는 타이포그래피를 볼 수 있다는 것입니다.

완료되면 WhatFont 종료 를 눌러 글꼴 팝업을 닫고 평소와 같이 웹 페이지를 사용합니다.

이제 텍스트에서 글꼴을 식별하는 방법을 살펴보았으므로 이미지에서도 동일한 작업을 수행할 수 있는지 궁금할 것입니다. 대답은 예입니다! 어떻게 하는지 봅시다.

이미지에서 글꼴을 식별하는 방법

텍스트에서 글꼴을 찾는 것 외에도 이미지를 통해 웹사이트에서 글꼴을 식별할 수도 있습니다. 이를 위해 WhatTheFont 라는 온라인 도구를 사용할 것입니다.

무슨 글꼴

이 온라인 도구 를 사용하면 이미지를 업로드하고 이미지의 텍스트를 분석하고 사용 중인 글꼴을 알려줍니다.

이렇게 하려면 이 페이지로 이동하여 이미지를 도구로 끌어다 놓거나 업로드하십시오(JPG 또는 PNG 형식인지 확인하십시오.) 그런 다음 텍스트의 자르기 상자를 정의하면 도구에서 올바른 글꼴을 표시합니다. 텍스트. 또한 WhatTheFont는 글꼴을 구입할 수 있는 웹사이트를 제공하고 사용자 정의 텍스트로 글꼴을 테스트할 수도 있습니다.

이렇게 하면 사진이나 스크린샷에서 글꼴을 확인할 수 있습니다. 또한 모바일에서도 글꼴을 식별하는 데 사용할 수 있는 모바일 앱이 있습니다.

결론

대체로 사용하는 글꼴은 사이트에 큰 영향을 줄 수 있습니다. 가독성, 전반적인 탐색을 개선하고 방문자를 더 오래 유지하는 데 도움이 될 수 있습니다. 명료성과 가독성은 모든 사이트의 중요한 측면이며 더 많은 노력을 기울일수록 더 나은 결과를 얻을 수 있습니다.

이 가이드에서는 웹사이트에서 글꼴을 식별하는 다양한 방법을 살펴보았습니다.

• 브라우저 검사 도구 사용
• 북마크릿 도구 사용
• 브라우저 확장 프로그램을 통해
• 전용 온라인 도구를 사용하여 이미지에서 글꼴 식별

올바른 글꼴을 찾으면 사이트에 추가하는 방법을 선택하는 것은 사용자의 몫입니다. 사용하려는 타이포그래피를 선택했으면 WordPress에서 글꼴을 변경하여 즉시 새 글꼴로 전환하는 방법에 대한 가이드를 살펴보는 것이 좋습니다.

WordPress 사이트의 가독성과 탐색을 개선하는 더 많은 방법을 찾고 있다면 다음 기사를 참조하십시오.

• WordPress에 이동 경로를 추가하는 방법
• 브랜드별로 WooCommerce 제품 구성
• WordPress 메가 메뉴를 추가하는 방법

새로운 글꼴을 발견하셨습니까? 어떤 방법을 사용하셨나요? 아래 의견 섹션에서 알려주십시오!