とりこのすすめ

Appleの公式ウェブサイトで使用されているフォントはSan FranciscoというAppleオリジナルフォントです。Apple製品でも使用されています。

このフォントを自分のウェブサイトでも使用したいと思った方は結構いるのではないかと思います。かくいう僕もその一人です。

AppleのウェブサイトのCSSを見てみるとfont-familyには以下のように指定されており、"SF Pro JP", "SF Pro Text", "SF Pro Icons"が該当しそうですね。

font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } 

というわけで、ウチのウェブサイトも全く同じように指定してみましたがこれだけだとこのフォントは使用できません。"SF Pro JP", "SF Pro Text", "SF Pro Icons"はwebフォントなため、font-faceで指定しなくてはなりません。

もう一度Appleのウェブサイトのソースを眺めてみると以下を見つけました。おそらくこのファイルの中にfont-faceの指定があるはずです。

<link rel="stylesheet" href="/wss/fonts?families=SF+Pro,v3|SF+Pro+Icons,v3|SF+Pro+JP,v1" type="text/css" media="all" />

中を見てみると以下のようにfont-faceが指定されていました。

@font-face {
	font-family:'SF Pro JP';
	font-style:normal;
	font-weight:400;
	src:url('/wss/fonts/SF-Pro-JP/v1/SFProJP_regular.eot');
	src:local('?'), url("/wss/fonts/SF-Pro-JP/v1/SFProJP_regular.woff2") format("woff2"), url("/wss/fonts/SF-Pro-JP/v1/SFProJP_regular.woff") format("woff"), url("/wss/fonts/SF-Pro-JP/v1/SFProJP_regular.ttf") format("truetype");
	/* (C) 2015 Apple Inc. All rights reserved. */
}

urlに指定されてるアドレスは相対パスなので、頭にhttps://www.apple.comをつけてあげる必要があります。早速ウチのCSSに記述し喜び勇んで自分のサイトを表示してみました。

…変わりませんね。試していた環境がWindows PCだったのでGoogle Chromeの「検証」で確認したところ以下のメッセージが出ていました。

Access to font at 'https://www.apple.com/wss/fonts/SF-Pro-JP/v1/SFProJP_regular.woff2' from origin 'https://www.infoatmackers.jp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

まあそうですよね。CORSのエラーです。https://www.apple.com からでないとダメということで。

ダメかなとなんとなく予想はしてはいましたが試みは失敗に終わりました。

これ以上ぐりぐりとやると不正アクセスを疑われそう（？）なのでこの辺りで。

そもそも成功してもこれやっていいんだっけ？という気も。