웹폰트란 웹페이지에서 기본 글꼴 대신에 다른 글꼴을 쓰고 싶을 때 사용하는 폰트입니다.

내 웹사이트에 적용한 폰트가 방문자의 컴퓨터에 이미 설치되어있다면 웹폰트를 사용하지 않아도 되지만, 폰트가 설치되지 않은 컴퓨터에선 기본 폰트로 보입니다. 그래서 폰트를 웹사이트에 내장하여 어느 컴퓨터에서든 내가 설정한 폰트로 보이게끔 하고 싶을 때, 웹폰트를 이용합니다.

오픈 라이선스 폰트를 사용해야 하는 이유

우리가 폰트를 다운로드하면 흔히 받게 되는 ttf, otf 파일을 웹폰트 파일인 eot, woff 등으로 변환만 해주면 웹사이트에서 사용할 수 있습니다. (※요즘엔 HTML과 CSS가 발전하여 그냥 ttf 파일을 사용해도 됩니다. 하지만 웹폰트보다는 무거워서 변환을 권장합니다.) 방법이 쉬운 만큼, 맘에 드는 폰트 아무거나 내려받아 사용하면 된다고 쉽게 말할 수 있다면 참 좋겠지만... 대부분의 폰트가 라이선스 상, 웹폰트로 사용이 금지됩니다. (또는 별도의 계약 필요) 그러니 웬만하면 모든 용도로 허가된 오픈 라이선스 폰트를 사용하는 게 좋겠죠?

구글 폰트 (Google Fonts)

많이들 알고 계신 구글 폰트입니다.
여러 언어의 웹폰트를 제공 중이고, 대부분의 오픈 라이선스 한글 폰트가 여기에서 제공되고 있습니다.
(※ 한글 본고딕(Noto sans KR)은 이 페이지에서 제공되지 않습니다! 아래 스포카 한 산스 소개 영역을 참고해주세요.)
최근엔 우측 이미지처럼 그래픽 아트를 보는 듯한 페이지도 만들어졌네요.

두 페이지 모두 HTML이나 CSS에 삽입하는 코드를 제공하여 웹폰트를 쉽게 사용할 수 있게 도와줍니다.
내 사이트의 서버나 호스팅에 폰트 파일을 올리지 않고 구글 서버에 저장된 폰트를 가져다 쓰는 방법인데, 많이들 추천하는 방법입니다. 왼쪽 사이트에선 "Family Selected", 오른쪽 사이트에선 "∨"버튼을 누르면 확인할 수 있습니다.

https://fonts.google.com/?selection.family=Lato&subset=korean
https://googlefonts.github.io/korean/

스포카 한 산스 (Spoqa Han Sans)

고딕체(Sans-serif) 중에 나눔 고딕 싫다면 대신 고려해 볼 만한 '스포카 한 산스'체 입니다.
구글과 어도비에서 합작 및 오픈 라이선스로 공유하여 큰 주목을 받았던 본고딕(Noto sans / Source Han Sans)을 개량하고 경량화한 폰트로, 웹에서 사용하기 적합합니다.

원래의 본고딕을 사용하고 싶다면 아래의 링크를 참고해주면 되는데, 개인적으로는 이 스포카 한 산스를 사용하는 걸 추천하고 싶네요. (제 깃허브 블로그도 스포카 한 산스를 적용했어요.'ㅂ')

본고딕 ) https://fonts.google.com/earlyaccess#Noto+Sans+KR
스포카 한 산스 ) https://spoqa.github.io/spoqa-han-sans/ko-KR/

눈누

뒤늦게 알게 되어 추가합니다!
이 사이트 하나만 알고 있으면 될 정도로, 구글 폰트보다 더 많은 한글 웹폰트 자료를 갖고 있고 정리도 잘되어 있어 좋은 사이트입니다. 위에서 소개한 스포카 한 산스도 제공 중이며 BI/CI, 임베딩 등 사용범위 별 필터링 기능도 있어 편리합니다.

각 폰트의 상세페이지에 들어가면, 폰트 파일을 다운로드할 수 있는 공식 페이지 링크와 CSS 코드를 확인할 수 있고 웹, 모바일 매체에서 사용 가능하다는 라이선스 정책을 바로 확인할 수 있어 안심하고 사용할 수 있네요. :)

http://noonnu.cc

그 외 웹폰트

눈누 사이트와 중복되는 폰트가 많지만, 사이트가 만들어지기 전 웹 제작 유저분들이 정성껏 정리한 자료라 소개합니다.

다른 분들께서 이미 정리해 준 웹폰트 리스트를 알려드립니다.

아리따 폰트는 별도의 내용을 작성해서 소개하고 싶었지만 공식 배포 페이지에서 웹폰트가 아니라 설치형 폰트만 제공하여 직접 변환해서 쓰셔야 합니다. 그러나 이미 다른 분들이 변환하여 공유해준 것이 있고, 이걸 쓰는 게 편리합니다. 아래 두 링크를 참고해주세요! :)

https://ludens.kr/coding/css/cdn-korean-web-font/
출처) Ludens님

https://github.com/gshn/fonts
출처) sir 커뮤니티 gshn님

그 외 오픈 라이선스 일반 폰트 / 웹폰트로 변환 방법

그 외 오픈 라이선스로 공개된 폰트를 간략하게 소개할게요. 그리고 일반 폰트를 웹폰트로 사용하시려면 변환을 해주시는 게 좋으니 자세하게 설명된 포스트를 링크합니다.
http://koreawebdesign.com/webfont/
출처) Korea Web Design 남반장님

오픈 라이선스 폰트

순바탕
http://font.kpipa.or.kr/

본명조 (Noto Serif / Source Han Serif)
https://source.typekit.com/source-han-serif/

아리따 글꼴 (아리따 돋움 / 아리따 부리)
http://www.apgroup.com/int/ko/about-us/visual-identity/arita-typeface.html

웹폰트 사용에 대한 모든 것

마지막으로, 포스트를 작성하려고 웹폰트에 대해 구글링을 해보다 발견한 글을 공유합니다.
개발자가 알아둬 봄 직한 내용, 웹폰트 적용 시 주의할 점 등 많은 내용이 있으니 프로덕트에 웹폰트를 사용할 예정이라면 한번 읽어 보시길 추천합니다 ^^

http://wit.nts-corp.com/2017/02/13/4258
출처) WIT – NTS UIT BLOG 김원준님