앞에서 글꼴을 적용하는 방법을 배워봤습니다. CSS의 font-family 속성에서는 여러 글꼴을 지정할 수 있지만, 만약 사용자의 컴퓨터에 해당 글꼴이 없으면 원하는 글꼴을 보여줄 수 없다는 한계가 있습니다.
이런 경우, 웹 폰트를 사용하여 문제를 해결할 수 있습니다.
웹 폰트란?
웹 폰트는 글꼴 파일을 직접 인터넷으로 제공하는 방식입니다.
사용자가 사이트에 접속하면 글꼴이 자동으로 다운로드되어 표시됩니다. 구글 폰트는 이런 웹 폰트를 제공하는 사이트 중 하나로, 누구나 무료로 사용할 수 있습니다.
구글 폰트에서 Noto Sans Korean 적용하기
이번 레슨에서는 구글 폰트에서 Noto Sans Korean이라는 글꼴을 적용해보겠습니다. 이 글꼴은 깔끔한 산 세리프 스타일로, 많이 사용되고 있습니다.
1. 구글에서 Google Fonts를 검색하세요.
2. 사이트에 들어가면 다양한 글꼴이 보이는데, 여기서 Noto Sans Korean을 검색합니다.
3. 검색 결과에서 해당 글꼴을 클릭한 후, 오른쪽 위의 Get font 버튼을 클릭합니다.
4. 다음 화면에서 Get embed code를 클릭하여 코드를 복사합니다.
HTML 코드에 추가하기
복사한 코드를 HTML 문서의 <head> 태그 안에 붙여 넣습니다. 아래의 예시와 같이 작성합니다
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit</title>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
</head>
<body style="font-family: 'Noto Sans KR', sans-serif">
...
</body>
</html>여기서 <link> 태그는 외부 데이터를 가져오는 역할을 합니다. CSS에서는 font-family를 사용하여 글꼴을 지정하는데, 띄어쓰기가 있는 글꼴 이름은 작은따옴표로 감싸줘야 합니다.
글꼴 적용 확인하기
이제 글꼴을 적용하면, 원하는 스타일로 바뀐 것을 확인할 수 있습니다.
다른 글꼴 추가하기: Poppins
이번에는 영문 글꼴인 Poppins를 추가해보겠습니다. 같은 방식으로 구글 폰트에서 Poppins를 검색하고, Get font를 클릭한 뒤, 코드를 복사합니다.
HTML 코드의 <head> 태그에 아래와 같이 추가합니다.
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:wght@100..900&display=swap" rel="stylesheet">
그리고 font-family 속성에 Poppins를 추가합니다.
<body style="font-family: Poppins, 'Noto Sans KR', sans-serif">
...
</body>이제 영문 "Weekly Codeit" 글꼴이 Poppins로 변경된 것을 확인할 수 있습니다!
이 블로그 포스트는 웹 폰트 사용법과 구글 폰트 활용을 잘 설명하고 있습니다. 추가할 내용이나 수정할 부분이 있으면 말씀해 주세요!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com