웹 페이지만 구현하다 보면 예쁜 폰트를 사용하고 싶을 때가 있습니다. 힙하고 예쁜 무료 폰트를 쓰고 싶을 땐 어떻게 해야할까요? 이럴때는 구글에서 무료로 제공 되는 Google Font를 사용하면 됩니다. 한글도 예쁜 폰트가 많아요!
사용법도 아주 간단합니다.
1. 구글 폰트 사이트로 들어가주세요!
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
첫 페이지에 들어가면 다양한 폰트들을 볼 수 있습니다. 우리는 여기서 한글 폰트만 선택해서 적용해 볼 꺼예요.
2. laguage에서 'Korean' 클릭
3. 원하는 한글 폰트 클릭!
4. 맨 아래로 내려가서 폰트명(stylish) 뒤에 있는 + 버튼을 클릭하면 오른쪽에 메뉴바가 뜹니다.
5. 오른쪽 메뉴바의 link 복사해서 html 코드의 <head>태그 안에 넣기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">
<title>구글 폰트 설정</title>
</head>
<body>
<p class="test1">안녕하세요</p>
<p class="test2">내 이름은 '지금'이야.</p>
<p class="test3">나는 24살이야</p>
<p class="test4">만나서 반가워</p>
</body>
</html>
6. 메뉴바의 css 코드 복사해서 스타일 시트의 원하는 요소에 넣기
.test2 {
font-family: 'Stylish', sans-serif;
}지난 폰트설정에서 배웠듯이, 'font-family: 'Stylish', sans-serif;'의 의미는 다음과 같습니다.
font는 'Stylish'글꼴로 해줘. 만약 Stylish글꼴(첫번째 글꼴)이 없으면 'sans-serif'(글꼴모음)으로 해줘~ 라는 뜻입니다.
7. 완성!
쉽죠?
이번에는 여러개의 구글 폰트를 사용해보겠습니다.
구글 폰트에 들어가서 원하는 폰트명의 + 버튼을 눌러주세요 !
폰트명(Do Hyeon)의 '+'버튼을 눌러서 '-'버튼으로 만들때마다 오른쪽 메뉴탭에 link와 css 코드가 추가 되는 걸 볼 수 있습니다. 위에 적힌 것과 같은 방법으로 link와 css 코드를 추가해주세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Myeongjo&family=Stylish&display=swap" rel="stylesheet">
<title>구글 폰트 설정</title>
</head>
<body>
<p class="test1">안녕하세요</p>
<p class="test2">내 이름은 '지금'이야.</p>
<p class="test3">나는 24살이야</p>
<p class="test4">만나서 반가워</p>
</body>
</html>.test2 {
font-family: 'Do Hyeon', sans-serif;
}
.test3 {
font-family: 'Nanum Myeongjo', serif;
}
.test4{
font-family: 'Stylish', sans-serif;
}
예쁘게 적용된 걸 확인할 수 있습니다 :)
예전에는 한글 지원이 안되서 예쁜 한글 폰트를 사용하려면 따로 찾아서 들어갔어야 했는데, 이제는 바로 한글 폰트를 적용 찾을 수 있어서 좋네요 :) 그럼 예쁜 폰트로 원하는 페이지 구현 하시길 바랍니다
'지금, 개발하기 > CSS' 카테고리의 다른 글
| HTML/CSS] 배달의 민족 폰트 파일 사용하기 (0) | 2021.06.04 |
|---|---|
| HTML/CSS] 크롬 개발자 도구로 네이버 디자인 바꾸기 (1) | 2021.06.02 |
| HTML/CSS] 폰트 설정 (0) | 2021.05.31 |
| HTML/CSS] 한글이 깨져요 ㅜㅜ (0) | 2021.05.29 |
| HTML/CSS] CSS 우선순위는어떻게 정해지나요? 2탄 (0) | 2021.05.28 |
