웹 사이트에서 사용하는 글꼴을 확인하는 방법

특히 매력적인 웹사이트를 본 적이 있고 웹사이트에서 사용하는 글꼴을 확인하는 방법이 궁금하다면 브라우저의 검사기를 여는 것만큼 간단합니다. 웹사이트의 모든 부분은 브라우저에서 해석됩니다. 따라서 브라우저 검사기를 올바르게 사용하는 방법을 알고 있다면 소스뿐만 아니라 포함된 이미지, 페이지에서 찾은 다른 요소의 CSS 속성도 찾을 수 있습니다.

이 게시물에서는 Chrome 브라우저 검사기를 사용하여 웹사이트에서 사용하는 글꼴을 찾는 방법과 글꼴을 사용하는 방법까지 살펴보겠습니다. 하지만 먼저 액세스 방법과 인스펙터에서 사용할 수 있는 기능에 대해 설명하겠습니다.

Chrome 검사기 액세스

Chrome 브라우저를 사용 중이고 웹사이트를 검사하려면 가장 먼저 검사 창에 액세스해야 합니다. 이를 수행하는 방법에는 여러 가지가 있습니다.

• F12 키를 누르거나
• 특정 항목을 마우스 오른쪽 버튼으로 클릭하고 열리는 메뉴에서 Inspect 옵션에 액세스합니다. 이 방법의 장점은 해당 요소를 직접 강조 표시하거나
• Control + Shift + I (Windows) 또는 Cmd + Alt + I (Mac) 키 조합을 눌러, 또는
• Chrome 메뉴에 액세스하여(오른쪽 상단 바에 점 3개) » 기타 도구 » 개발자 도구.

인스펙터 창은 브라우저 창 자체에 통합되어 표시되거나 별도의 창에 표시될 수 있습니다. 이러한 옵션에 액세스하려면 검사기의 오른쪽 상단에 있는 구성 아이콘(점 3개)을 클릭하고 «Dock Side» 속성 값을 변경하면 됩니다.

페이지 콘텐츠를 컴퓨터 보기 모드로 보거나 모바일 장치에서 보는 것처럼 선택할 수도 있습니다. 인스펙터의 상단 바 왼쪽에 있는 두 번째 버튼을 클릭하면 모바일 장치에서 액세스하는 것처럼 콘텐츠가 자동으로 어떻게 표시되는지 확인할 수 있습니다.

장치를 표시할 장치 유형, 크기 또는 장치를 세로 또는 가로 모드로 표시할지 여부를 지정할 수도 있습니다.

인스펙터 메인 탭

보셨겠지만 인스펙터는 다양한 탭으로 구성되어 있습니다.

각각에서 다음과 같은 다양한 기능에 액세스할 수 있습니다.

• 요소 : 페이지의 HTML 코드와 적용된 스타일을 보여줍니다. 또한 이를 수정하고 새 규칙을 빠르게 추가할 수도 있습니다.
• 콘솔 : 페이지에서 발생하는 다양한 오류 및 경고 메시지(로드되지 않는 이미지, 자바스크립트 오류 등)를 표시합니다.
• 소스 : 페이지의 리소스 트리를 표시합니다. 다양한 리소스를 어디서 얻었는지 확인하고 수정할 수 있습니다.
• 네트워크 : 웹사이트에서 만들어진 다양한 요청, 요청 내용에 대한 액세스, 얻은 응답, 시간…
• 성능 : 실행 중인 프로세스를 보여주고 페이지의 성능을 측정하는 역할을 합니다.
• 메모리 : 웹페이지 로딩 및 실행시 소모된 메모리를 보여줍니다.
• 응용 프로그램 : 웹 응용 프로그램에서 사용하는 리소스에 대한 유용한 정보를 표시합니다.
• 보안 : 페이지에서 액세스한 여러 사이트와 해당 인증서에 대한 정보를 표시합니다.
• 감사 : 오류를 확인하기 위해 감사 보고서를 생성할 수 있습니다.
• 인스펙터에 탭과 기능을 추가하는 플러그인이 있으므로 더 많은 탭이 있을 수 있습니다. 이전 이미지에서는 Redux DevTools 플러그인을 설치한 것으로 표시됩니다.

요소 탭

이제 당면한 문제로 돌아가 보겠습니다. 웹 페이지에 있는 모든 콘텐츠의 글꼴을 알고 싶었습니다.

이전에 언급했듯이 요소 탭에서 현재 페이지에 있는 다양한 요소의 스타일과 HTML 코드에 액세스할 수 있습니다.

위의 이미지에서 볼 수 있듯이 왼쪽에는 소스 코드를 보여주는 메인 창이 있습니다. 그리고 오른쪽에는 페이지의 다른 요소에 적용되는 CSS 스타일 규칙 패널이 있습니다.

실제로 스타일 패널에는 세 개의 탭이 있습니다.

• Styles : 적용된 CSS 규칙을 보여주고 새로운 규칙을 수정 및 추가할 수 있습니다.
• 계산 됨: 요소의 테두리, 여백 및 채우기를 나타내는 패널과 함께 요소에 적용된 모든 규칙을 표시합니다.
• 이벤트 리스너 : 페이지에서 시작된 이벤트 트리와 영향을 받는 컨트롤을 표시합니다.

항목의 세부 정보 보기

예를 들어, Nelio Software 기본 페이지로 이동하여 제목에서 Nelio Software 라는 단어를 선택하고 마우스 오른쪽 버튼을 클릭하여 항목이 무엇인지 검사하면 위의 이미지가 표시된 검사기가 열립니다.

인스펙터 이미지에서 메인 창에서 "Nelio Software"라는 제목 스타일이 h1 이라고 알려주는 것을 볼 수 있습니다.

동일한 창에서 속성이나 텍스트를 마우스 오른쪽 버튼으로 클릭하고 수정하거나 삭제할 수 있는 옵션이 있습니다. 분명히 여기에서 변경한 사항은 원본 콘텐츠를 변경하지 않지만 페이지를 디자인할 때 변경 사항이 어떻게 보이는지 알고 싶을 때 매우 유용한 도구입니다.

글꼴 보기

이제 그것이 헤드라인이라는 것을 알지만 글꼴은 어떻습니까?

아주 간단합니다. 인스펙터의 계산 탭에서 선택한 항목의 모든 속성을 찾을 수 있습니다. font-family 속성까지 아래로 스크롤하면 웹사이트의 헤드라인이 있는 글꼴을 정확히 찾을 수 있습니다.

그리고 글꼴을 변경하려는 경우 해당 요소가 어떻게 보이는지 궁금하다면 스타일 탭으로 이동하여 font-family 속성으로 이동하여 원하는 값으로 직접 수정할 수 있습니다.

변경된 글꼴 유형으로 웹사이트가 자동으로 표시됩니다.

보시다시피 Google Chrome 검사기는 요소에 수정 사항을 적용한 후 남아 있는 디자인을 시험해 볼 수 있는 매우 편안하고 사용하기 쉬운 도구입니다.

이미지의 글꼴은 어떻습니까?

지금까지 본 것처럼 Google Chrome 관리자를 사용하면 페이지에 있는 모든 요소의 속성을 볼 수 있습니다. 그러나 웹 사이트에서 이미지의 글꼴을 보고자 하는 경우 인스펙터에서 이를 볼 수 없습니다. 인스펙터는 페이지에 삽입된 이미지의 속성을 보여주지만 해당 이미지의 내용에 대한 세부 정보는 표시하지 않습니다.

이를 위해 이미지에 사용된 글꼴을 식별하는 데 도움이 되는 Font Squirrel Matcherator 또는 Whatfontis.com과 같은 몇 가지 도구가 있습니다. 이렇게 하려면 두 도구에서 이미지를 다운로드한 다음(whatfontis.com에서 이미지의 URL을 표시할 수도 있음) 식별하려는 문자가 포함된 이미지 부분을 선택해야 합니다.

두 도구 모두 선택한 텍스트와 대략적으로 일치하는 전체 글꼴 세트를 표시합니다. 그러나 이것이 정확히 일치하지 않는 것으로 의심되는 경우 도구에 표시된 것과 유사한 글꼴을 Google에 검색하면 결과를 확인할 수 있습니다.

Unsplash에서 Gemma Evans의 추천 이미지.