구글 웹 폰트 적용하고 자간 행간 조절하기 – 웹 코딩 강좌

웹 디자이너를 위한 웹 코딩 강좌 열일곱 번째 시간입니다.
이번 시간에는 구글 웹폰트를 사용해서 고퀄리티의 무료 웹폰트를 불러오는 방법을 알아보고 폰트의 두께, 자간과 행간을 조절하는 방법을 알아볼게요. 디자이너에게 폰트는 중요한 요소인데 폰트 사용에 따른 라이센스는 조심해야하죠. 저작권 걱정없는 구글 무료 웹폰트 적용해보도록 할게요. link 태그를 사용해서 쉽게 불러올 수 있습니다.

구글 웹폰트 – https://fonts.google.com/

예제 다운은 멤버십 회원 커뮤니티에 올린 링크에서 받으실 수 있습니다.

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

여러분이 처음부터 끝까지 사이트를 만들 정도의 실력을 쌓기까지 오래 걸리기 때문에 보통은 스킨이나 테마, 템플릿을 사용하는 경우가 많죠. 아니면 디자이너 분들 중에 카페24 코드를 수정하라고 업무를 하시는 분들도 계시죠. 혹은 워드프레스 테마로 작성해서 영문은 멋있는데 한글은 엉망인 경우도 있죠.

그럴 때 가장 먼저 바꾸고 싶은 부분은 바로 폰트가 아닐까 생각이 듭니다.

사이트 내에 가독성만 높여도 혹은 괜찮은 폰트를 적용만 해도 퀄리티는 확 달라지죠.
사용법을 알아보기 전에, 폰트는 디자이너에게 가장 중요한 요소 중 하나이자 가장 예민하고 조심해야 할 문제가 있죠. 바로 라이센스입니다. 여러분이 충분히 여유가 있고 폰트의 가치를 안다면 비싼 비용을 지불하고 구매하시면 되지만, 개인 블로그나 폰트에 돈을 쓸 여유가 없는 분들이라면 무료 폰트가 가장 중요하죠. 라이센스가 충분히 보장되고 웹 폰트를 지원하는 구글 폰트를 사용할 겁니다.

<!-- Link 태그로 불러오는 방법 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700;900&display=swap" rel="stylesheet">

html 태그에 link 태그로 불러오는 방법과 css파일에 @import로 불러오는 방법이 있습니다.
근데 html 태그 link 태그로 불러오는 방법을 권장합니다.
이유는 @가 포함된 리소스를 사용하면 파일을 로드될 때까지 지연시키기 때문입니다. 조금이라도 사이트를 빨리 로딩하고 싶다면 link 태그로 불러오는 방법을 선택해줍니다.

CSS에서 폰트 크기, 두께, 자간, 행간 조절하는 방법은 아래와 같습니다.

.font-style{
    font-family: 'Noto Sans KR', sans-serif; /* 서체 적용 */
	font-size: 20px; /* 크기 */
	font-weight: bold; /* 두께 */
	line-height: 30px; /* 행간 */
	letter-spacing: -0.5px; /* 자간 */
}