반응형
html 파일 내에서 웹폰트 적용하는 방법
- 1) 웹폰트 불러오기 후 글꼴 사용
- 2) 옵션들을 지정해놓은 클래스 호출
- 클래스 사용의 경우 옵션들을 미리 지정해놓고 여러 상황에 따라 재사용 할 수 있음
<!-- test.html -->
<!-- html 파일에 웹폰트 적용하기 -->
<html>
<head>
<!-- 한글 사용을 위한 UTF-8 설정 -->
<meta charset="UTF-8">
<!-- 브라우저 제목에 보여줄 타이틀 이름 설정 -->
<title> 폰트 설정하기 </title>
<!-- 웹폰트 불러오기 배민Jua폰트 / Rubik Gemstones 폰트 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik+Gemstones&display=swap" rel="stylesheet">
<!-- fontTest 클래스 생성 -->
<style>
.fontTest {
font-family: 'Rubik Gemstones', cursive;
color: red;
font-style: italic;
font-size: 32px;
}
</style>
</head>
<body>
<!-- 기본 글꼴의 텍스트 -->
<h1>default font</h1>
<!-- 배민 Jua폰트를 적용한 텍스트-->
<div style="font-family: 'Jua', sans-serif;">
<h1> div style font test </h1>
</div>
<!-- fontTest 클래스의 설정을 적용한 텍스트 -->
<div class="fontTest">
<h1> div class font test </h1>
</div>
</body>
</html>적용 화면
html 파일에 css 파일을 호출하여 글꼴을 적용하는 방법
- css 파일에 웹폰트 호출 및 클래스 정의
<!-- test.html -->
<!-- css 파일을 불러와 웹폰트 적용하기 -->
<html>
<head>
<!-- 한글 사용을 위한 UTF-8 설정 -->
<meta charset="UTF-8">
<!-- 브라우저 제목에 보여줄 타이틀 설정 -->
<title> 폰트 설정하기 </title>
<!-- css 파일 호출, 동일한 디렉토리에 위치하므로 그대로 파일이름만 입력 -->
<link href="font_test.css" rel="stylesheet">
</head>
<body>
<!-- 기본 글꼴의 텍스트 -->
<h1>default font</h1>
<!-- css 파일의 클래스 설정을 적용한 텍스트 -->
<div class="cssFontTest">
<h1> css class font test </h1>
</div>
</body>
</html>
/* font_test.css */
/* 웹폰트 호출 */
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
/* 클래스 옵션 정의 */
.cssFontTest {
font-family: 'Jua', sans-serif;
color: red;
font-style: italic;
}적용 화면
반응형