웹페이지의 디자인을 하면서 폰트는 절대 절대 빠질 수 없는 중요한 요소 중 하나이다
웹상에서 폰트를 가져올 때 가장 유명한 곳이 google fonts 가 아닐까 싶다 (무료인데 폰트도 정말 많고 다양하다)
인스타그램 폰트와 대략 비슷한 느낌이 있는 폰트를 찾고 싶었고 계속되는 스크롤 끝에
내가 원하는 느낌의 폰트를 하나 찾아냈다
우선 google fonts를 어떻게 나의 웹페이지 상에서 적용되게 할 것인지 알아보자
우선 구글폰트 사이트로 들어간다 https://fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
그러면 정말 다양한 폰트들이 나오는데 여기서 스크롤을 쭉쭉 내리면서 사용하고 싶은 폰트를 찾아도 괜찮고
만약 따로 원하는 폰트가 있다면 직접 검색해서 바로 찾아도 된다
나는 Lobster라는 이름의 폰트로 결정했고 저 폰트를 클릭해주면
이렇게 내가 클릭 한 폰트 페이지로 넘어간다
Styles 밑에 형광팬으로 밑줄 친 부분은 내가 직접 타이핑하여 대략 어떻게 보이는지 확인이 가능하며
사이드에 +Select this style 은 다운로드하고 싶은 폰트의 스타일 (굵기) 선택이 가능하다
다른 폰트들은 semi bold, bold, regular 등 다양한데 Lobster 폰트는 레귤러 400만 존재했다
원하는 폰트 굵기의 스타일을 선택하면 왼쪽에 사이드바가 나오면서 하나씩 추가될 것이다.
그래서 나는 Regular 400 굵기의 폰트 스타일을 다운로드하기로 하고,
이걸 웹페이지에 사용하기 위해 적용하는 방법에는 link와 @import 방법이 존재한다.
둘 중 하나를 선택하고 css에서 사용할 땐 밑의 font-family 속성을 복붙 해주면 된다.
참고로 저기서 Lobster 폰트 뒤에 다른 폰트가 하나 더 있는 이유는, 만약 웹페이지를 실행했을 때
Lobster 폰트가 로딩되지 않아 적용이 안됬으면 그 뒤의 폰트가 대신 적용이 되는 것이다.
여기서 내가 겪었던 googlefonts 가 적용되지 않았던 (정확히 말하면 됐다가 안됐다가 했었다) 이유가 설명이 가능하다.
구글 폰트를 가져가는 방법 중 @import의 길이가 더 짧아서.. 그리고 별 차이가 없을 것이라 생각하여
이클립스에 임포트 방식으로 가져갔다
처음에는 원하는 Lobster 폰트가 잘 나왔는데 어느 순간부터 갑자기 그 뒤의 다른 폰트로 자동 적용이 되는 것이 아닌가..?
도대체 이유가 뭐지 싶었는데 알고 보니 googlefonts의 로딩 속도의 차이였다.
임포트 방식보다 link 방식을 더 추천한다는 얘기가 있었는데 바로 속도상의 차이로 인해
웹페이지가 다 로딩되었음에도 불구하고 @import 방식으로 불러오면 폰트의 로딩 속도가 늦는 것이었다.
그래서 link 방식으로 변경하니 이제야 폰트가 잘 적용이 된다.
@import 및 link는 HTML의 <HEAD> 태그 안에다가 설정해주면 되고,
font-family는 CSS <style> 또는 html inner style로 적용해주면 쉽게 사용이 가능하다.
참고로 나는 크롬을 사용하고 있는데,
인터넷 익스플로러 8 이하 버전에서 구글 폰트가 적용이 되지 않는 문제점들이 있다고 한다
IE8 이하에서 사용할 땐 link를 가장 위에 배치해야 한다.
+ 자신이 사용하고자 하는 폰트 스타일을 추가할 때 무작정 필요 이상의 모든 스타일을 다 가져오는 건
좋지 않다. (용량을 생각하자,,!) 정말 딱 사용할 것 같은 스타일만 추가하고 혹시라도 나중에 더 필요하다 싶으면
그때 가서 추가하는 방법을 더 추천하고 싶다