CSS 파일에서 Google Web Font를 가져 오는 방법은 무엇입니까?

258

CSS 파일에만 액세스 할 수있는 CMS로 작업하고 있습니다. 따라서 문서의 머리 부분에 아무것도 포함시킬 수 없습니다. CSS 파일 내에서 웹 글꼴을 가져 오는 방법이 있는지 궁금합니다.

css  fonts  google-webfonts 
— 데이비드
소스

답변:

382

@import방법을 사용하십시오 :

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

분명히 "Open Sans"( Open+Sans)는 가져온 글꼴입니다. 따라서 당신의 것으로 교체하십시오. 글꼴 이름에 여러 단어가있는 경우을 추가하여 URL을 인코딩하십시오.+ 각 단어 사이 부호 .

배치하십시오 @import규칙 앞에 CSS를 맨 위에 .

Google Fonts는 자동으로 @import지시문을 생성 할 수 있습니다. 글꼴을 선택한 후 (+)옆에 있는 아이콘을 클릭하십시오 . 왼쪽 하단에 "1 Family Selected"라는 제목의 컨테이너가 나타납니다. 클릭하면 확대됩니다. "사용자 정의"탭을 사용하여 옵션을 선택한 다음 "내장"으로 다시 전환하고 "내장 글꼴"에서 "@ 가져 오기"를 클릭하십시오. <style>태그 사이에 CSS를 스타일 시트에 복사하십시오 .

— ModernDesigner
소스
25
@import는 파일을 가져올 때까지 포함 된 리소스의로드를 지연 시키므로 사용하지 않는 것이 좋습니다. 자세한 답변은 여기를 참조하십시오 : stackoverflow.com/a/12380004/925560
— Renato Carvalho
5
@import 줄을 맨 위로 옮기면 내 인생이 해결되었습니다! 감사합니다!
— joalcego
2
Google은 왜 이것을 말합니까? Google Insides는 @import를 수행하지 않는다고 주장합니다. developers.google.com/speed/pagespeed/insights ?
— danger89
2
이것은 오래된 답변입니다. @import부하는 순차적으로 피해야한다 : varvy.com/pagespeed/avoid-css-import.html 구글을로드 선호 (및 기본) 방법이 사용 요즘 글꼴 <link>.
— Chuck Le Butt
2
SEO에 와서 Google PageSpeed ​​통찰력으로 페이지 속도를 최적화하기 시작하면 이것을 후회하게됩니다. <link>대신 배달을 사용 하고 최적화하십시오.
— 회계사 م
67 
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

@import를 사용하지 않는 것이 좋습니다. 위와 같이 레이아웃 헤드에 링크 요소를 사용하십시오.

— 버크
소스
19
"더 나은 사용하지 않는"이유를 확장 할 수 있습니까? 어떤 방법이 가장 적합한 지 알고 싶기 때문에이 질문을 검색했습니다.
— Adam Hollow
2
@import에 인터넷 탐색기 문제가있었습니다. 때로는 읽지 않는 경우도 있습니다.
— Burk
6
그는 구체적으로 헤더에 <link> 태그를 사용할 수 없다고 말했습니다.
— Nathan Nathan
26
다른 외부 파일의 병렬로드를 차단하지 않으므로 'link'를 사용하는 경우 +1입니다. 'import'는 다른 외부 파일의 병렬로드를 차단합니다.
— Jahmic
2
@import를 사용하면 HTML 마크 업 대신 CSS 스타일링의 글꼴 부분을 의미 적으로 더 정확하게 만들 수 있으며 CSS를 통해 사이트의 글꼴을 바꿀 수 있습니다. 그러나 척이 언급했듯이 약간의 속도로 타격을받는 것처럼 보입니다. 로드 시간을 확인한 다음 상황에 따라 결정할 수 있습니다. SVG의 경우 @import가 AFAIK 를 작동시키는 유일한 방법입니다 .
— Mentalist
38

글꼴 ttf / 기타 형식 파일을 다운로드 한 후 다음 CSS 코드 예제를 추가하십시오.

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}
스 니펫 확장

— 피델
소스
37

CSS 파일에 아래 코드를 추가하여 Google 웹 글꼴을 가져옵니다.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Open + Sans 교체 글꼴 이름을 가진 매개 변수 값을.

CSS 파일은 다음과 같아야합니다.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}
— 수샴 쿠마르
소스
9

@import 태그를 사용하십시오.

@import url('http://fonts.googleapis.com/css?family=Kavoon');
— jmz7v
소스
8

위의 답변과 함께이 사이트도 고려하십시오. https://google-webfonts-helper.herokuapp.com/fonts

이점:

  • 더 나은 응답 시간을 위해 Google 글꼴을 자체 호스팅 할 수 있습니다

  • 서체를 선택하십시오

  • 캐릭터 세트를 선택하십시오
  • 서체 스타일 / 무게를 선택하십시오
  • 대상 브라우저를 선택하십시오
  • 그리고 CSS 스 니펫 (css 스타일 시트에 추가)과 프로젝트에 포함 할 글꼴 파일의 zip을 얻습니다.

예 : your_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}
— 마르코 젠
소스
1
또한 font-weight: 400인수없이 동일한 코드를 사용하여 먼저 글꼴을로드 한 다음 나머지 글꼴 을로드 할 수 있습니다 . 이를 통해 더 빠르게 표시 할 수 있으며 전체 글꼴이 필요없는 경우 더 작은 CSS 파일이 필요합니다.
— 모토
3 
<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

글꼴을 선택하려면 링크를 방문하십시오 : https://fonts.google.com

웹 사이트에서 괄호를 제외하고 원하는 글꼴 이름을 작성하십시오.

예를 들어 Lobster를 선택한 글꼴로 선택한 다음

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

그런 다음 전체 HTML / CSS 파일에서 일반적으로 글꼴 모음으로 사용할 수 있습니다.

예를 들어

<h2 style="Lobster">Please Like This Answer</h2>
— RohanVTK
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.