CSS에서 Google 글꼴 가져오기
![CSS에서 Google 글꼴 가져오기](/img/CSS/feature-image---css-import-google-font.webp)
이 자습서에서는 CSS에서 Google 글꼴을 가져오는 몇 가지 방법을 배웁니다.
@import
규칙을 사용하여 CSS에서 Google 글꼴 가져오기
CSS @import
규칙은 스타일시트에서 다른 스타일시트를 가져오는 데 사용됩니다. url()
함수에서 스타일시트를 문자열로 지정할 수 있습니다.
@import
규칙을 사용하여 CSS에서 외부 글꼴을 가져올 수도 있습니다. 예를 들어 url()
함수에서 Google 글꼴을 사용하고 font-family
속성으로 글꼴을 설정할 수 있습니다.
Google Fonts에는 우리가 선택할 수 있는 다양한 글꼴이 있습니다. 웹사이트에서 글꼴의 URL을 얻을 수 있습니다.
예를 들어 Google 글꼴 웹사이트로 이동하여 Roboto
글꼴을 선택합니다. 그런 다음 오른쪽 사이드바에서 @import
라디오 버튼을 클릭합니다.
다음으로 style
태그 사이의 URL을 복사합니다. 마찬가지로 HTML에서 h1
및 p
태그를 만듭니다.
CSS에서 스타일시트 상단에 @import
규칙을 작성하고 url()
함수 안에 Roboto
글꼴 URL을 붙여넣습니다. Outfit
글꼴을 선택하고 URL을 가져옵니다.
다음으로 h1
태그를 선택하고 font-family
속성을 사용하여 Outfit
글꼴을 설정합니다. 마찬가지로 단락에 Roboto
글꼴을 설정합니다.
이런 식으로 스타일시트에서 Google 글꼴을 가져올 수 있습니다.
그러나 @import
규칙을 사용하여 Google 글꼴을 가져오는 것은 권장하지 않습니다. 파일을 가져오지 않으면 웹페이지에 글꼴이 표시되지 않기 때문입니다.
예제 코드:
<h1> Title </h1>
<p>This is Roboto font.</p>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
h1 {
font-family: 'Outfit', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
}
link
태그를 사용하여 CSS에서 Google 글꼴 가져오기
link
태그는 HTML에서 Google 글꼴을 가져오는 가장 적절한 방법입니다. link
태그는 글꼴을 미리 로드하므로 권장됩니다.
link
태그의 href
속성에 글꼴 URL을 지정할 수 있습니다. Google Fonts 웹사이트에서 모든 link
태그를 생성할 수 있습니다.
예를 들어 Google 글꼴 웹사이트로 이동하여 Comforter Brush
글꼴을 선택합니다. link
라디오 버튼을 선택하고 생성된 link
태그를 복사합니다.
그런 다음 HTML에 태그를 붙여넣고 p
태그를 만들고 그 안에 텍스트를 작성합니다. 그런 다음 CSS에서 p
태그를 선택하고 font-family
속성을 Comforter Brush
로 설정합니다.
처음 두 link
태그의 rel
속성에 preconnect
를 사용했습니다. 브라우저가 리소스에 대한 선점 연결을 시작할 수 있도록 사용자가 href
속성에 리소스가 필요하다는 것을 브라우저에 알립니다.
이런 식으로 link
태그를 사용하여 CSS에서 Google 글꼴을 가져올 수 있습니다.
예제 코드:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet">
<p>Comforter Brush font.</p>
p {
font-family: 'Comforter Brush', cursive;
}
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn