웹개발/HTML, CSS 기초
[html, css 기초] 13. 외부 폰트 사용법
chaNsoo
2024. 1. 19. 10:15
이번 강의는 구글 폰트 ( 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;
}주의 : 외부 폰트는 작은따옴표로 감싸 주어야 한다.
# 콤마로 구분해서 뒤에 다른 폰트를 삽입하면 폰트가 없는 경우 브라우저가 왼쪽부터 오른쪽으로 탐색하며 로컬에 가지고 있거나 내장된 폰트를 사용한다.