사용중인 웹 폰트를 쉽게 확인할수 있는 크롬 확장 ( extension ) 프로그램 3 개


이 웹에 사용된 폰트가 뭐지? 혹은 작업중인 웹에 사용된 폰트가 제대로 적용된것인지 확인하고 싶을때가 있습니다.

아래의 크롬 확장 프로그램을 설치하면 개발자가 아니더라도 쉽게 확인할 수 있습니다.

 

1. WhatFont

  1. 크롬에서 이 링크를 클릭합니다.
  2. 추가합니다.
  3. 추가가 끝나면 크롬 우측 위에 이런 아이콘이 보일겁니다.
  4. 아이콘을 클릭후 확인하고 싶은 웹 페이지의 글자를 클릭하면 아래와 같이 나옵니다.

    위 스크린샷을 보면 Koverwatch 라는 폰트를 사용중이고 사이즈는 21px 에 컬러는 #444444 를 사용중인걸 알 수 있습니다.

확인 후 폰트 확인 모드에서 빠져나갈때는 ESC 버튼을 누르거나 화면 우측 상단의 Exit 버튼을 클릭하면 됩니다.

보통 개발자 콘솔을 열어서 확인하게 되는데, 이 앱을 사용하면 좀더 간편하고 알기쉽게 표시해 줍니다.

 

유의해야 할점은 “이 확장 프로그램으로 봤을때는 나눔 고딕인데 실제로는 돋음체더라.” 라는 경우가 있을수 있습니다.

‘css 설정은 맞게 들어가 있는데 실제 폰트는 적용되지 않은 상황’ 인데, 이 이 확장 프로그램의 기능은 단순히 css 에 설정되어 있는 폰트 정보를 보기좋게 표시해주는것 뿐입니다.

이런 상황은 자주 있지는 않고 폰트 다운로드 경로가 설정되지 않았다거나 하는 사소한 실수가 원인일 가능성이 높습니다.

 

2. WhatRuns

이 프로그램은 1의 whatfont 처럼 폰트만 보여주는게 아니라 이 웹사이트가 무엇으로 만들어졌으며 어떤 스크립트 라이브러리를 사용중인지 얄려줍니다.

특히 워드프레스 사이트라면 테마와 플러그인은 뭘 사용중인지  알려줍니다.

마찬가지로 설치하면 아이콘이 나오고 클릭하면 아래와같이 보여줍니다.

버전까지 정확하게 나오지는 않네요. 플러그인도 저렇게 많이 사용하고 있지는 않습니다.

하지만 그 외의 것들은 대부분 맞게 나옵니다.

 

3. CACHE CLEAR

이건 폰트 확인용은 아니지만 웹 제작 혹은 CSS 나 스크립트를 변경할때 있으면 좋습니다. 버튼 클릭 한번으로 캐시를 삭제해 주는 프로그램입니다.

예를들어 CSS 는 분명 수정을 했는데, 수정한게 웹에는 반영이 안되어있을 경우가 간혹 있습니다.

그럴경우 사용중인 브라우져의 옵션에 들어가서 캐시 삭제를 해야하는데 이마저도 번거롭기에 이 확장 프로그램 버튼 한번으로 삭제하는 것입니다.

 

자주 사용하지는 않는 확장 프로그램이지만 웹과 관련된 일을 할경우 없으면 불편합니다.

참고로 2번 whatruns 와 3번 cache clear 는 파이어폭스 버전도 있습니다.

 



댓글 남기기

Be the First to Comment!

  댓글 이메일 구독  
구독 설정 :