CSS에서 Google 글꼴 가져오기

1. @import 규칙을 사용하여 CSS에서 Google 글꼴 가져오기
2. link 태그를 사용하여 CSS에서 Google 글꼴 가져오기

이 자습서에서는 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;
}