웹사이트에서 멋진 폰트를 사용하고 싶다면 Google Fonts를 활용하는 것이 가장 좋은 방법입니다.
Google Fonts는 무료로 제공되며, CSS에 간단히 추가할 수 있어 많은 개발자들이 애용합니다.
이 글에서는 Google Fonts를 HTML과 CSS에 적용하는 방법을 두 가지 방식으로 소개하겠습니다.
<link> 태그를 사용한 적용 방법가장 일반적인 방법은 HTML의 <head> 태그에 <link>를 추가하는 것입니다.
<link> 태그를 복사합니다.<head> 태그에 붙여넣습니다.아래는 Roboto 폰트를 적용하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts 적용</title>
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>구글 폰트 적용 완료!</h1>
</body>
</html>📌 font-family: 'Roboto', sans-serif; 를 추가하면 글꼴이 적용됩니다!
이 방법은 브라우저에서 폰트를 빠르게 로드할 수 있어 가장 추천하는 방식입니다.
@import를 사용한 적용 방법HTML <link> 대신 CSS 파일에서 @import를 활용하여 Google Fonts를 불러올 수도 있습니다.
@import를 이용하면 CSS 파일에서 직접 폰트를 가져올 수 있습니다.
style.css)@import url('<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>');
body {
font-family: 'Roboto', sans-serif;
}이 방법은 HTML 파일이 아닌 CSS 파일 내에서 관리할 수 있다는 장점이 있습니다.
하지만 <link> 태그 방식보다 속도가 조금 느릴 수 있으므로 주의해야 합니다.
Google Fonts에서는 폰트 굵기(weight)나 스타일(italic)도 조정할 수 있습니다.
font-weight)h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* 굵은 글씨 */
}font-style)p {
font-family: 'Roboto', sans-serif;
font-style: italic; /* 기울임 */
}📌 Google Fonts에서 여러 스타일을 선택해 적용하면 더욱 다양한 효과를 낼 수 있습니다!
| 적용 방법 | 장점 | 단점 |
|---|---|---|
<link> 태그 사용 | 속도가 빠르고 캐싱 최적화 가능 | HTML 코드에 추가 필요 |
@import 사용 | CSS 파일에서 관리 가능 | 속도가 다소 느릴 수 있음 |
✔ 속도를 고려한다면 <link> 태그 방식 추천!
✔ CSS 파일에서 일괄적으로 관리하고 싶다면 @import 방식도 가능!
https://youtu.be/ZuSvgLfRZSk 1. 개요 DSM 설치를 마친 NAS에 저장 공간을 만드는 과정입니다. 드라이브 4개를 RAID 5로…
https://youtu.be/S30V0Ua5Aqg 1. 개요 공유기가 자동으로 나눠 준 주소를 쓰던 NAS에 고정 IP를 지정하는 과정입니다. 주소가…
https://youtu.be/IlN8nsrFC_Y 1. 개요 디스크만 꽂아 둔 새 Synology NAS에 운영체제인 DSM을 설치하고, 관리자 계정을 만들어…
https://youtu.be/EOAT80xj74M 1. 개요 공유 폴더의 내용을 다른 공유 폴더로 주기적으로 복사하도록 예약하는 과정입니다. 작업을 만들고…
https://youtu.be/T8OBQ1V61J0 1. 개요 앞서 만든 공유 폴더를 SMB로 내보내 윈도우에서 네트워크 드라이브로 붙여 쓰는 과정입니다.…
https://youtu.be/3TWRTRd-Imo 1. 개요 앞서 만든 공유 폴더를 NFS로 내보내 다른 리눅스 장비에서 마운트해 쓰는 과정입니다.…