Chrome의 HTTPS 페이지에있는 Google 웹 글꼴

Chrome의 HTTPS 페이지에있는 Google 웹 글꼴

---

저는 ecommmerce 프로젝트를 진행하고 있습니다. 사이트의 일부는 기본적으로 HTTP입니다. 결제 페이지와 같은 기타는 기본적으로 HTTPS입니다. HTTPS 페이지에서 Chrome의 콘솔에 다음 메시지가 표시됩니다.

[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=PT+Sans. 
[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700.
[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=Patua+One.

글꼴은 다음과 같은 방식으로 문서 헤드에 연결됩니다.

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>

지금까지 테스트 한 다른 브라우저에서는 괜찮아 보입니다.

---

스키마에 구애받지 않는 URL 만들기

변경 http://fonts.google...에//fonts.google...

http:또는 https:전면에서 드롭하면 브라우저는 현재 사이트에서 사용중인 스키마를 사용합니다.

httpsfrom을 사용하여 리소스를 요청할 수 http있지만 그 반대는 아닙니다. 위의 솔루션 (그리고 아마도 모범 사례)에 대한 대안은 사용 https가능한 경우 항상 사용 하는 것입니다 (이 스타일의 링크를 사용하는 경우에는 그래야하며 그렇지 않으면 아무 의미도 없음).

---

URL에서 프로토콜을 제거하고 브라우저가 결정하도록합니다.

<link href="//fonts.googleapis.com/css?family=PT+Sans" ...

페이지가 HTTPS 인 경우 글꼴은 HTTPS URL에서로드됩니다. 페이지가 HTTP 인 경우 HTTP URL에서로드됩니다.

참조 URL : https://stackoverflow.com/questions/18026809/google-web-fonts-on-https-pages-on-chrome