팁: 웹에서 내가 궁금한 폰트 찾는 방법

이미지를 업로드 하거나, 어플을 돌리는 방법도 있지만, 정확도 문제도 있고(엉뚱한 유료 폰트 나올지도 모르고),
설치나 광고 없이, 고전적이지만 가장 확실한 방법.
당연히 알거라고 생각했는데 물어보는 사람이 있길래, 랄까?

 

 

폰트명 알아내기

1. 웹페이지에서 도크를 연다(단축키: F12).

 

2. 왼쪽 위 화살표를 누르고, 원하는 폰트를 클릭한다.(단축키: ctrl + shift + c)

도크에서, "검사할 페이지 요소 선택"아이콘 클릭

 

 

3. 스타일에 "font-family"라고 입력.

여러 항목이 나온다.

 

4. 취소선이 없는 문자에서 앞에서부터 하나씩 지워가면서 찾기 (지정한 글꼴이 변경되면 그 꼴이 범인)

예시에서는

1차 : Noto Sans DemiLight,AppleSDGothicNeo-Regular,"Malgun Gothic",dotum,sans-serif
2차 : AppleSDGothicNeo-Regular,"Malgun Gothic",dotum,sans-serif
3차 : "Malgun Gothic",dotum,sans-serif
4차 : dotum,sans-serif

만약, 2차 입력에서 걸러지면 범인은 " Noto Sans DemiLight"이 됨.

참고로 맨 마지막은 시스템 문자라서 본인 컴퓨터의 시스템 글꼴
* (윈도우 사용자라면,) 고딕계열: 맑은 고딕, 명조계열: 바탕체
라이선스가... 하지만, 다음, 네이버 모두 기본 글꼴은 맑은 고딕을 쓰는걸 ㅜㅜ 하지만 블로그, 티스토리는 나눔체 쓰죠?

 

 

폰트 다운로드 또는 적용

라이선스 확인
일단 '네이버의 나눔시리즈(Nanum)', '구글의 두부시리즈(Noto)'는 무료로 사용가능하므로 예제에서는 추가 검색이 불필요하지만, 일단 폰트명을 검색하거나, 안나오는 경우 배포된 사이트로 가서 확인이 가능함.

* 두부: 다국어 지원이 미흡하던 시절, 표시할 수 없는 문자 ⊠를 두부라고 불러서 유래, No-topu, 두부그만!

 

배포되는 사이트를 알려면...

 

소스Tab으로 이동, 

css파일들(보라색)에서 찾기(Ctrl + F)를 눌러 원하는 폰트를 검색. 하나씩 다 찾아봐도 되지만, 센스좋게 font.css또는 style.css 부터 검색하자. (남의 집에 가서 변기를 찾고 싶으면, 안방이나 서재부터 찾는게 아니고 화장실부터 찾는 이치랄까...)

1. 내 사이트에 적용하고 싶다면 @font-face이하 전체 긁어오면 된다.

2. 다운로드 받고 싶으면, http://~ .woff 또는 woff2 또는 ttf 또는 otf까지 주소창에 입력하면 됨
하지만 요즘은 동영상도 다운 안 받고 다 스트리밍으로 보는걸...

만약, https://로 시작하지 않는다면, 서버에서 직접 보내주는 것. 게다가, 라이선스 검색도 잘 되지 않는다면 무리하지말고 포기하자. 싫다잖아.