@ font-face를 사용하여 Google 웹 글꼴을로드하려면 어떻게해야합니까?

Cormorant Garamond라고하는 Google 글꼴을 사용하고 싶지만 원하는대로 @ font-face 명령을 사용할 수 없습니다. 나는 살전 지침 (https://coderwall.com/p/5vrdkg/google-fonts-using-fontface-in-your-css)을 따라했고 지금은 같이 보이는 내 (다중) CSS 파일 중 하나의 선언이 :@ font-face를 사용하여 Google 웹 글꼴을로드하려면 어떻게해야합니까?

/* latin-ext */ 
@font-face { 
    font-family: 'Cormorant Garamond'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Cormorant Garamond Regular'), local('CormorantGaramond-Regular'), url(https://fonts.gstatic.com/s/cormorantgaramond/v3/EI2hhCO6kSfLAy-Dpd8fd8lWqVXdZDPPgQrkuJ8lbib3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
}

이 바로 '몸'전에 오른쪽 상단에 선언 그것은 분명 굴림 표시됩니다

.collection-editorial p { 
    font-family: 'Cormorant Garamond', Arial; 
    line-height: 110%; 
    text-align: left !important; 
}

내가 (크롬을 사용) 페이지를로드 : 더 아래 다음

나는이 있습니다. 그러나 관리자에서 오류를 보지 않고 "계산 된"CSS 규칙을 보면 분명히 Cormorant Garamond (CSS 규칙이 올바르게 적용된 것 같습니다)를 볼 수 있습니다. 그러나 그것은 분명히 올바르게 나오지 않습니다. 나는 어떤 트릭을 놓치고 있어야하지만, 뭐야?

출처

2017-03-04 Joel Guesclin

당신이 글꼴 파일을 포함나요 :

<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">

그런 다음,이 가족을 지정하려면 다음 CSS 규칙을 사용합니까? 왜 당신은 자신의'@ font-face' 속성을 정의 할 필요가 없으므로 google CDN을 사용하지 않는 것이 좋을까요? http://codepen.io/anon/pen/LWZjyy –

해당 글꼴을 웹 페이지에 삽입하려면이 코드를 HTML 문서의 <head>에 복사하십시오.

이

font-family: 'Cormorant Garamond', serif;

출처

2017-03-04 18:36:39

@ font-face를 사용하여 Google 웹 글꼴을로드하려면 어떻게해야합니까?

답변

관련 문제