사이트 글꼴 확인이 필요한 순간이 있습니다. 다른 사이트를 보다가 글자가 보기 좋거나, 내 워드프레스 글자 크기와 줄 간격을 조정하고 싶을 때 어떤 폰트를 쓰는지 궁금해지는 경우입니다.
처음에는 페이지 소스나 CSS 파일을 직접 봐야 하는 줄 알 수 있지만, 실제로는 크롬 브라우저만으로도 꽤 많은 정보를 볼 수 있습니다. 폰트 이름뿐 아니라 글자 크기, 굵기, 색상, 줄 간격까지 확인할 수 있어 워드프레스 디자인을 수정할 때도 참고가 됩니다.
이 글에서는 사이트 글꼴 확인 방법을 두 가지로 정리했습니다. 하나는 크롬 개발자 도구를 이용하는 방법이고, 다른 하나는 WhatFont 확장 프로그램을 쓰는 방법입니다. 개발자 도구가 어렵게 느껴진다면 확장 프로그램 방식이 더 편할 수 있습니다.
목차
사이트 글꼴 확인을 개발자 도구로 하는 방법
크롬에서 확인하고 싶은 사이트를 연 뒤 F12를 누르면 개발자 도구가 열립니다. 화면이 복잡하게 보이기 때문에 처음에는 어디를 봐야 할지 헷갈릴 수 있습니다. 이때 중요한 것은 왼쪽 상단에 있는 선택 도구입니다.
선택 도구를 누른 뒤 본문 글자 위에 마우스를 올리면 해당 문단에 적용된 스타일 정보가 표시됩니다. 여기에서 font 항목을 보면 현재 글자 크기와 폰트 패밀리 정보를 확인할 수 있습니다. 예를 들어 17px 크기와 함께 system font, Segoe UI, Roboto 같은 폰트 이름이 순서대로 표시되는 방식입니다.
선택 도구로 문단을 지정하면 작은 정보창이 함께 나타납니다. 여기에는 글자 색상, 폰트 크기, 폰트 이름, 접근성 대비 정보까지 보입니다. 워드프레스에서 본문 글자 크기를 조정하거나 색상을 맞출 때 이런 정보가 꽤 도움이 됩니다.
스타일 탭에서 더 자세히 보는 과정
선택 도구로 글자를 찍으면 개발자 도구의 Styles 영역에도 관련 CSS가 표시됩니다. 이곳에서는 실제로 적용된 font-size, font-weight, margin, line-height 같은 값을 더 자세히 볼 수 있습니다.
사이트 글꼴 확인만 할 때는 작은 정보창만 봐도 충분하지만, 내 사이트에 비슷하게 적용해 보고 싶다면 Styles 영역이 더 좋습니다. 값을 잠시 바꿔보면 실제 화면에서 바로 반영되기 때문에 워드프레스 CSS를 수정하기 전에 미리 테스트하는 느낌으로 볼 수 있습니다.
다만 개발자 도구는 기능이 많아서 초보자에게는 부담이 큽니다. 폰트 하나만 보고 싶은데 CSS 규칙과 상속값이 많이 나오면 오히려 더 어렵게 느껴질 수 있습니다. 이럴 때는 WhatFont 같은 확장 프로그램을 쓰는 편이 더 빠릅니다.
WhatFont로 사이트 글꼴 확인하기
WhatFont는 웹페이지의 글자 위에 마우스를 올려 폰트 정보를 보여주는 크롬 확장 프로그램입니다. 개발자 도구처럼 많은 메뉴를 열 필요가 없고, 폰트 이름을 중심으로 정리된 정보를 바로 볼 수 있습니다.
크롬 웹 스토어에서 WhatFont를 설치하면 브라우저 오른쪽 상단 확장 프로그램 목록에 추가됩니다. 자주 쓸 예정이라면 퍼즐 모양 확장 프로그램 메뉴에서 핀 아이콘을 눌러 고정해 두는 편이 좋습니다. 이렇게 해두면 필요할 때마다 메뉴를 다시 열지 않아도 됩니다.
WhatFont 아이콘을 누른 뒤 사이트의 글자를 클릭하면 폰트 정보창이 표시됩니다. Family, Style, Weight, Color, Size, Line Height 같은 항목이 정리되어 나오기 때문에 개발자 도구보다 읽기 쉽습니다.
실제로 글자를 선택하면 사용 중인 폰트 패밀리와 굵기, 색상, 줄 간격을 한 번에 볼 수 있습니다. 사이트 글꼴 확인을 자주 해야 한다면 개발자 도구보다 WhatFont가 더 편하게 느껴질 수 있습니다.
개발자 도구와 WhatFont의 차이
개발자 도구는 폰트 확인뿐 아니라 CSS 수정 테스트까지 할 수 있다는 장점이 있습니다. 워드프레스 테마의 본문 크기, 줄 간격, 색상 같은 값을 바꾸기 전에 화면에서 미리 확인할 때 좋습니다. 특히 Astra, GeneratePress 같은 테마에서 추가 CSS를 수정할 때 참고하기 쉽습니다.
WhatFont는 단순히 사이트 글꼴 확인만 빠르게 하고 싶을 때 더 편합니다. 버튼을 누르고 글자 위에 마우스를 올리면 바로 결과가 나오기 때문에 CSS 구조를 몰라도 사용할 수 있습니다. 폰트명만 알고 싶은 경우라면 WhatFont 방식이 더 빠릅니다.
운영 중인 워드프레스 사이트에서 글자 크기가 어색하게 보일 때도 이 두 가지 방법을 같이 쓰면 좋습니다. 먼저 WhatFont로 참고 사이트의 폰트 정보를 보고, 내 사이트에서는 개발자 도구로 값을 바꿔보면 수정 방향을 잡기 쉬워집니다.
적용 후 느낀 점
사이트 글꼴 확인 방법을 알고 나면 디자인 수정 과정이 훨씬 단순해집니다. 예전에는 글자가 왜 달라 보이는지 감으로만 판단했지만, 폰트 이름과 크기, 줄 간격을 직접 보면 문제를 더 빨리 찾을 수 있습니다.
특히 워드프레스 본문이 너무 작거나 줄 간격이 좁아 보일 때는 개발자 도구에서 값을 먼저 바꿔보는 것이 좋습니다. 바로 CSS에 적용하지 않고 화면에서 테스트할 수 있기 때문에 불필요한 수정이 줄어듭니다.
WhatFont는 평소 참고 사이트를 볼 때 빠르게 확인하는 용도로 두고, 실제 수정 전에는 개발자 도구에서 한 번 더 확인하는 흐름이 가장 편했습니다.
FAQ
사이트 글꼴 확인은 크롬에서만 가능한가요?
크롬이 가장 편하지만, 엣지처럼 크로미움 기반 브라우저에서도 비슷하게 확인할 수 있습니다. F12 개발자 도구와 WhatFont 확장 프로그램을 함께 쓰면 대부분의 사이트에서 폰트 정보를 볼 수 있습니다.
WhatFont에서 보이는 폰트가 실제 사용 폰트인가요?
대부분은 현재 화면에 적용된 폰트를 보여줍니다. 다만 폰트 패밀리에 여러 이름이 함께 나오면 브라우저나 운영체제 환경에 따라 실제 표시되는 글꼴이 달라질 수 있습니다.
워드프레스 글꼴 수정 전에 무엇을 보면 좋나요?
폰트 이름만 보지 말고 크기, 굵기, 줄 간격을 같이 보는 것이 좋습니다. 본문 가독성은 글꼴보다 font-size와 line-height 차이에서 더 크게 달라지는 경우가 많습니다.
