1
0

More than 3 years have passed since last update.

なんで自鯖のフォントファイルをサイトビルダーで使えないんじゃ^~

Last updated at Posted at 2020-07-04

経緯

某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");
}
/* 以下略 */

結果

絶対に正解じゃないけど、解決したのでヨシ!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0