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