제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만,
제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.
혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!
구글 폰트(Google Font) 적용/사용하는 방법
웹(Web) 어플리케이션을 개발하면서 파일을 다운받지 않고 구글 폰트(Google Font)를 적용하는 과정입니다.
결과 이미지
Before
After
적용 방법
1. 구글 폰트(Google Font) 공식 사이트로 접속합니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 사용하고 싶은 폰트를 선택합니다.
- Tips: 원하는 폰트 스타일을 빠르게 찾기 위해 Categories, Language 등을 미리 설정
3. 'Styles' 부분에서 원하는 Font Size를 선택 후 'Select(+)' 버튼을 클릭합니다.
- Tips: 원하는 폰트에 대해서 다수 선택 가능!
4. 우측 상단에 위치한 'View selected families' 버튼을 클릭합니다.
5. 선택한 폰트가 정상적으로 리스트 업되는지 확인합니다.
6. 선택한 폰트에 대한 구글 폰트에서 제공하는 코드를 구현하고 있는 소스 코드 내 html 파일에 정의합니다.
★ 구글 폰트에서 제공하는 코드
☆ <link> 방식
☆ @import 방식
★ 소스 코드 적용 방법
☆ <link> 방식
<!DOCTYPE html>
<html lang="">
<head>
...
<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=Gamja+Flower&display=swap" rel="stylesheet">
...
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
...
<div id="app"></div>
</body>
</html>
☆ @import 방식
<!DOCTYPE html>
<html lang="">
<head>
...
<style>
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');
</style>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
...
<div id="app"></div>
</body>
</html>
7. 코드 내 CSS 영역에 구글 폰트에서 제시하는 코드를 정의합니다.
★ 구글 폰트에서 제공하는 코드
★ 소스 코드 적용 방법
저의 경우 전체적으로 해당 폰트를 적용하고 싶어서 와일드 캐릭터인 *의 스타일로 정의하였습니다.
* {
font-family: 'Gamja Flower', cursive;
}
'Programming > Etc.' 카테고리의 다른 글
| 인텔리제이(IntelliJ) 환경에 Git 설치 및 Github Repository 연동하기 (0) | 2023.01.13 |
|---|---|
| 웹 스토리지(Web Storage) - 로컬 스토리지(Local Storage), 세션 스토리지(Session Storage) (0) | 2023.01.10 |
| VSCode에서 Git 계정 연동/설정하기 (0) | 2022.12.09 |
| VSCode 환경에 Git 설치 및 Github Repository 연동하기 (0) | 2022.11.16 |
| VSCode의 Terminal에서 Vue-Cli 설치 명령어 인식 불가 오류 해결 방법 (0) | 2022.11.08 |
댓글