[解決済み】自分のサーバーでgoogle web fontsをホストする方法は?
質問
イントラネットのアプリケーションで、いくつかのgoogleフォントを使用する必要があります。クライアントはインターネットに接続できるかもしれませんし、できないかもしれません。ライセンス条項を読むと、合法的に許可されているようです。
どのように解決するのですか?
回答がだいぶ古くなってしまいましたが、ご了承ください。
以下にも、より技術的に洗練された回答がある、など。
というわけで、これが現在受け入れられている答えであるという事実によって、これがまだベストな答えであるという印象を与えないようにしましょう。
また、googleの全フォントセットをgithubでダウンロードできるようになりました。 google/font レポジトリにあります。また、彼らは ~フォントの420MBのzipスナップショット .
まず、フォントセレクションをzip圧縮されたパッケージとしてダウンロードし、トゥルータイプフォントの束を提供します。それらをどこか公開できる場所にコピーし、CSSからリンクできるようにします。
google webfontのダウンロードページには、このようなincludeリンクがあります。
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
の束でフォントを定義したCSSにリンクしています。
@font-face
の定義があります。
ブラウザで開いてコピーし、自分のCSSに貼り付け、正しいフォントファイルやフォーマットの種類を含むようにURLを修正します。
だから、これ。
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
はこうなります。
/* Your local CSS File */
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}
このように、自分のシステムでフォントをホストすることの欠点は、真のタイプフォーマットに自分自身を制限することであり、一方、Google Webfont サービスは、どのフォーマットが送信されるかをアクセスするデバイスによって決定します。
さらに
.htaccess
というファイルを、MIMEタイプを含むフォントを格納するディレクトリに追加することで、Chrome Dev Toolsでエラーが出ないようにしました。
このソリューションでは、true type だけが必要ですが、異なるフォントも含めたい場合は、さらに定義しても支障はありません。
font-awesome
.
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
関連
-
[解決済み] OCRに最適なフォントとは?
-
[解決済み] Sublime Textのデフォルトフォントは何ですか?
-
[解決済み] Unity3d 3Dテキストが常にぼやけた状態で表示される。
-
[解決済み] Sublime Text 3でフォントを変更する
-
[解決済み] 数字の「ZERO」とアルファベットの「O」を明確に区別するWindowsフォント
-
[解決済み] MS-DOSで使われているフォントは?
-
[解決済み] LaTeXでドキュメントのフォントを変更するには?
-
[解決済み】自分のサーバーでgoogle web fontsをホストする方法は?
-
[解決済み】Google Fontsのリンクやインポートを含めると?
-
[解決済み] プログラミングにおすすめのフォントは?[終了しました]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] OCRに最適なフォントとは?
-
[解決済み] .woff2フォントの適切なMIMEタイプ
-
[解決済み] 数字の「ZERO」とアルファベットの「O」を明確に区別するWindowsフォント
-
[解決済み] MS-DOSで使われているフォントは?
-
[解決済み] 同じフォントに対して複数のフォントファイルを追加する方法を教えてください。
-
[解決済み] なぜフォントフェイスにttf, eot, woff, svg,...を含める必要があるのでしょうか?
-
[解決済み] LaTeXでドキュメントのフォントを変更するには?
-
[解決済み】自分のサーバーでgoogle web fontsをホストする方法は?
-
[解決済み】Google Fontsのリンクやインポートを含めると?
-
[解決済み] プログラミングにおすすめのフォントは?[終了しました]