経緯
某Webサイトビルダーでサイトタイトルにフォントを使いたい
↓
カスタムコード機能でCSSを記述する
@font-face {
font-family: "custom-font";
src: url("https://my-rental-server.sample/font/tsukaitai.ttf");
}
h1#kakkoii-title {
font-family: custom-font, sans-selif;
}
↓
chrome先生「Access to font at 'https://my-rental-server.sample/font/tsukaitai.ttf' from origin 'https://suitbuilder.sample' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
」
↓
僕「ぴえん」
HeaderでCORSの許可(よくわかってない)
ファイルのヘッダーでCORSの許可(?)を与えるといいらしい。
.htaccessがよくわかってない脆弱エンジニアな僕「ヘッダーを記述するならPHPだな?(名案」
解決
フォントファイルのあるフォルダにこんなPHPを用意した。
readfont.php
<?php
header('Access-Control-Allow-Origin: *');
echo file_get_contents($_GET['a']);
?>
そしてサイトビルダーのカスタムコードの@font-face
はこんな感じ
@font-face {
font-family: "custom-font";
src: url("https://my-rental-server.sample/font/readfont?a=tsukaitai.ttf") format("truetype");
}
/* 以下略 */
結果
絶対に正解じゃないけど、解決したのでヨシ!