반응형
어떤 기기로 접속해도 같은 글꼴을 보여주고 싶다면? = 웹폰트 사용을 고려한다.
웹폰트 사용법
- CSS 파일에 import하여 사용한다.
- 사용법 : @import url( );
다음 예제에 웹 폰트를 적용시켜보자.
웹 폰트는 구글 폰트 중 Nanum Pen Script 를 사용하였습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹폰트 사용하기</title>
<link rel="stylesheet" href="./css/22_google_font.css">
</head>
<body>
<h1>HTML+CSS+JavaScript</h1>
</body>
</html>
- google에 웹 폰트 검색 후 무료 웹 폰트 사이트인 구글 폰트에 접속
2. 검색창에 Nanum Pen Script 검색 후 검색 결과에 나오는 폰트를 선택
3. Select Regular 400 + 를 선택
4. 오른쪽 사이드 창에서 @import 선택 후 아래 코드를 복사해줍니다.
참고로 html 태그인 <style> 태그는 복사안하셔도 됩니다.
5. 복사한 코드를 CSS 코드에 붙혀넣기 해줍니다.
6. CSS 코드를 작성하면서 해당 태그에 글꼴을 적용하시려면
웹폰트 사이트의 CSS rules to specify families 부분의 코드를 복사한다음
글꼴을 적용할 태그 안에 붙혀넣기 해주시면 됩니다.
적용결과
반응형
'CSS > CSS 이론' 카테고리의 다른 글
| [CSS] 속성선택자 - 특수선택자 (0) | 2023.08.09 |
|---|---|
| [CSS] 인접한 형제 선택자 (0) | 2023.08.09 |
| [CSS] Inline Style (0) | 2023.08.09 |
| [CSS] CSS 디자인 우선순위 (0) | 2023.08.09 |
| [CSS] 반응형 웹 이론 - 이미지 처리 (0) | 2023.08.09 |