구글 폰트는 무료로 사용할 수 있는 다양한 웹 폰트를 제공하는 서비스입니다. 다음은 구글 폰트를 무료로 사용하는 방법에 대한 단계별 가이드입니다:
1. 구글 폰트 웹사이트 방문
먼저 구글 폰트 웹사이트에 접속합니다.
2. 폰트 선택
원하는 폰트를 선택합니다. 웹사이트 상단의 검색 바를 이용하여 특정 폰트를 검색하거나, 카테고리, 언어, 속성 등을 기준으로 폰트를 필터링할 수 있습니다.
3. 폰트 스타일 선택
폰트를 클릭하면 해당 폰트의 다양한 스타일(Regular, Bold, Italic 등)을 볼 수 있습니다. 원하는 스타일을 선택합니다. 선택한 스타일은 페이지 우측 하단에 'Selected family'에 추가됩니다.
4. 임베드 코드 복사
'Selected family' 섹션에서 'Embed' 버튼을 클릭합니다. 그러면 웹사이트에 폰트를 추가하기 위한 HTML 링크 태그와 CSS 사용 예시가 나옵니다.
HTML에 추가하기
HTML 파일의 <head> 섹션에 다음과 같이 링크 태그를 추가합니다:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
위 링크는 선택한 폰트에 따라 다를 수 있습니다.
CSS에 추가하기
CSS 파일에 다음과 같이 폰트를 적용합니다:
위 예시는 Roboto 폰트를 적용하는 예시입니다. 선택한 폰트 이름에 맞게 'Roboto' 부분을 변경하면 됩니다.
5. 페이지에 폰트 적용 확인
위 단계를 완료한 후 웹 페이지를 새로고침하면 선택한 폰트가 적용된 것을 확인할 수 있습니다.
예시
다음은 구글 폰트를 웹 페이지에 적용하는 전체 예시입니다:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph using the Roboto font.</p>
</body>
</html>
이 예시를 브라우저에서 열면, Roboto 폰트가 적용된 텍스트를 볼 수 있습니다. 이와 같이 구글 폰트를 무료로 사용할 수 있습니다.
'IT공부' 카테고리의 다른 글
| [직일구의 웹개발] CSS의 cascading 성격 - 특정성, 중요도, 순서 (0) | 2024.07.29 |
|---|---|
| 크롬에서 개발자도구 들어가는 단축키 (0) | 2024.07.23 |
| html 폰트 사이즈 (font size) - 1px, 1pt, 1em, 1rem 차이와 중요성 (0) | 2024.07.23 |
| 아이폰에서 앱스토어가 보이지 않을 때 해결할 수 있는 몇 가지 방법 (0) | 2024.07.01 |
| [직일구의 웹개발 공부] HTML의 기본 구조 (0) | 2024.06.30 |