이번 강의는 구글 폰트 ( https://fonts.google.com/ )에 있는 폰트를 css에서 사용하는 방법을 배워보자.
step 1. 사이트에 접속한다.
step 2. 원하는 폰트를 추가한다. select + 부분을 클릭하면 된다.
step 3. 오른쪽 <link rel~ 부분 코드를 복사한다.
step 4. html파일 <head>에 중첩시킨다.
<!DOCTYPE html>
<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=Fira+Sans:ital,wght@0,400;1,700&family=Oswald:wght@700&display=swap" rel="stylesheet">
<link href="daily-challenge.css" , rel="stylesheet" />
<title>My Daily Challenge</title>
</head>
step 5. css파일 font-family에 다운로드 받은 폰트명을 삽입한다.
h1 {
font-family: 'Oswald', sans-serif;
text-align: center;
color: #8f15c7;
}
p {
font-family: 'Fiea sans', sans-serif;
text-align: center;
color: #bded8d;
}주의 : 외부 폰트는 작은따옴표로 감싸 주어야 한다.
# 콤마로 구분해서 뒤에 다른 폰트를 삽입하면 폰트가 없는 경우 브라우저가 왼쪽부터 오른쪽으로 탐색하며 로컬에 가지고 있거나 내장된 폰트를 사용한다.
'웹개발 > HTML, CSS 기초' 카테고리의 다른 글
| [html, css 기초] 15. 이미지 추가 및 스타일링 (0) | 2024.01.19 |
|---|---|
| [html, css 기초] 14. pre 태그 (0) | 2024.01.19 |
| [html, css 기초] 12. 파일 병합 및 id (0) | 2024.01.19 |
| [html, css 기초] 11. css 아웃소싱 (0) | 2024.01.18 |
| [html, css 기초] 10. 링크 설정 기초 (0) | 2024.01.18 |
