質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

2回答

5842閲覧

AWS S3 WEBフォントの文字化け

te_w

総合スコア19

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

1クリップ

投稿2017/07/23 06:26

AWSのS3にWEBフォント(FontAwsome)を配置して、別サイトから参照させたいと考えております。
フォントファイルを参照はできるのですが、文字化けしています。

IEで、文字コードをUTF-8にするとFontAwsomeが表示されてきますが、サイトはEUCのためほかの文字が文字化けします。
AWS S3に何か設定が必要なのでしょうか。
FontAwsome以外のS3上のファイル(icomoonや画像ファイルなど)は、参照(読み込み)ができています。

お分かりになる方はいらっしゃいますでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

根本解決には至りませんでした。
フォントを参照させているCSSファイル内に文字コード指定UTF-8を追加。

投稿2017/11/01 06:34

te_w

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

S3 bucketのCORS設定に<AllowedHeader>Content-*</AllowedHeader>を追加していますか?

<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> <AllowedHeader>Content-*</AllowedHeader> </CORSRule> </CORSConfiguration>

投稿2017/07/24 08:32

moonphase

総合スコア6621

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

te_w

2017/07/24 09:11

ありがとうございます。 まったく同じ内容を追加しております。 できるはずと思うのですが・・・。 AWS上のEC2に立てたWEBサイトでは文字化けせずに使えるのですが、使えないWeBサーバーがあり、原因がわからず困っております。
te_w

2017/08/04 04:46

CORS設定の他に必要な設定はあるのでしょうか。
moonphase

2017/08/08 07:19

私の環境で試してみましたが、EUCのページは同じく文字化けしていました。 ブラウザのエンコードを日本語(EUC)に変更したら、Webフォント以外は見えました。 試しに、HTMLから全ての日本語を削除し、UTF-8にして英字のみにしてみましたが、 Webフォントは表示されませんでした。 IEではそもそも表示されるんでしょうか? ChromeであればEUCでも問題なく表示されていました。
te_w

2017/11/01 06:32

ご確認頂きましてありがとうございました。 IEでは、フォントのみは表示できておりました。 回答が遅くなり大変申し訳ございません。 結局、フォントを参照させているCSSファイル内に文字コード指定UTF-8を追加をいたしました。文字化けは起こらなくなっています。 ただ、おいているサーバーが違うことで、同じファイルが異なる出力がされてしまうことがわからないまま、になっています。釈然としませんが、 対策は行いましたので、クローズさせて頂こうと思っております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問