728x90
먼저 파일로 폰트를 바꾸는 법을 알아보자
카페24 상업용 무료 폰트 다운로드 - 카페24
라이선스 걱정 없이 어디서나 사용할 수 있는 상업용 무료 폰트
fonts.cafe24.com
여기서 원하는 폰트를 다운받아서 작업할 위치에 폰트 폴더를 생성후 파일을 붙여넣어 준다.
여기서 아마모네 폰트가 눈에 띄였다.
그래서 아마모네 폰트로 설정해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폰트파일로 폰트변경</title>
<style>
@font-face {
font-family: "my-my" ;
src: url("./fonts/Cafe24Ohsquare.ttf");
}
#wrap {
font-family: "my-my";
}
</style>
</head>
<body>
<div id="wrap">
카페24 아네모네 폰트!!
</div>
</body>
</html>이렇게 파일을 설정하면 폰트가 바뀐다.
이렇게 하면 폰트파일을 여러가지로 많이 가지고 있어야 한다는 단점이 있다.
간단히 구글 폰트로 바꿔보자
https://googlefonts.github.io/korean/
Google Fonts + 한국어 • Google Fonts + Korean
googlefonts.github.io
여기서 원하는 폰트를 골라서 선택하면
사용할수 있는 여러가지 방법이 뜬다.
그중에서 링크 방식과 css로 바꾸는 방법을 배워보자.
우선은 링크 방식을 해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower:400" rel="stylesheet">
<title>구글폰트 링크방식</title>
<style>
#wrap {
font-family: "Gamja Flower";
}
</style>
</head>
<body>
<div id="wrap">
구글 폰트 감자 플라워
</div>
</body>
</html>링크로 폰트 위치를 알려준다.
그리고 폰트를 어디에 사용할껀지 알려준다.
화면에 구글 폰트 감자 플라워가 뜰 것이다.
다음은 css이다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Kirang+Haerang:400');
#wrap {
font-family: "Kirang Haerang";
}
</style>
</head>
<body>
<div id="wrap">
구글 폰트 송호땅끝
</div>
</body>
</html>이 또한 마찬가지로 위치를 알려주고
폰트를 사용 할 자리에 알려주면 된다.
그러면 화면에 변경된 폰트로 '구글 폰트 송호땅끝' 이 뜰 것이다.
앞으로 폰트 변경 할때 자주 사용할 것이다.
728x90
'프로그래밍 > Web [HTML]' 카테고리의 다른 글
| Thymeleaf를 사용하는 프로젝트 (0) | 2023.04.03 |
|---|---|
| 노드 (0) | 2023.03.23 |
| 체크 박스 편 - 모양만 만듭니다. (0) | 2022.12.02 |
| 아이콘 편 (0) | 2022.12.02 |
| 등급 분류 모양 만들기 (0) | 2022.12.01 |
