CSS
github-pages
Googlefonts

Githubpagesでgoogle fontsが使えない問題

More than 1 year has passed since last update.


about

githubpagesに静的サイトを公開したら表示が崩れる。

ローカル環境での表示

スクリーンショット 2017-09-03 23.23.45.png

githubpagesでの表示

スクリーンショット 2017-09-03 23.23.42.png

どうやらgoogle fontsが読み込めていないっぽい。


原因

githubpagesはデフォルトでhttpsでの通信を行うので、http経由でコンテンツを取ってくる指定をしていたのが悪かった。


対応

httpをhttpsと変えるだけ(google fontsの場合は、他はコンテンツをダウンロードして直置きとか?)


index.html

-<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>


+<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

解決:)

スクリーンショット 2017-09-04 0.19.00.png