自分のサーバーでGoogle Webフォントをホストする方法


271

イントラネットアプリケーションでいくつかのgoogleフォントを使用する必要があります。クライアントはインターネット接続がある場合とない場合があります。ライセンス条項を読むと、法的に許可されているようです。


6
私が理解しているのは、1つのファイルをダウンロードして保存するほど簡単ではないということです。各ブラウザーは異なるフォント形式をサポートしており、Googleは、すべてのブラウザーでフォントが正しく機能するように、必要なすべてのファイルを取得する直接かつ簡単な方法を提供していません。
Samarth Bhargava、2012年

1
リンクされたスタイルシートからすべてのURIを取得します。
fuxia

38
はい、私はすべての詳細を自分で把握することができ、または私はいずれかの前に行われ、共有に経験やスクリプトを持っているかどうかを確認するために質問をすることができます
Samarthバルガヴァを

2
さて、Googleはfonts.googleapis.com/css?UAヘッダーに応じてさまざまな回答を返します(読み取り:ブラウザー)➝したがって、現在のブラウザーが必要とするものだけが配信されます。必要なすべてのフォント(またはURLだけでも)を取得したい場合は、さまざまなブラウザからcssファイルを複数回ロードする必要があります。さまざまな偽造ヘッダーを使用して、必要なものすべてを取得します。
フランクノッケ

このツールを使用してください:npmjs.com/package/font-ranger
非同期実行

回答:


217

私の回答はかなり古くなっています。

以下に、他のより技術的に洗練された回答があります。

これが現在受け入れられている答えであるという事実が、これがまだ最良の答えであるという印象を与えないようにしてください。


githubのgoogle / fontリポジトリからgoogleのフォントセット全体をダウンロードすることもできます。また、フォントの〜420MB zipスナップショットも提供します


最初に、フォントの選択をzip形式のパッケージとしてダウンロードし、多数のTrue Typeフォントを提供します。それらをあなたのCSSからリンクできるどこか、どこかに公開してください。

グーグルウェブフォントのダウンロードページには、次のようなインクルードリンクがあります:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

@font-face一連の定義を介してフォントを定義するCSSにリンクします。

ブラウザーで開き、それらをコピーして独自の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サービスは、アクセスするデバイスによって送信されるフォーマットを決定することです。

さらに、.htaccessChrome Dev Toolsでエラーが発生しないように、mimeタイプを含むフォントを含むディレクトリにファイルを追加する必要がありました。

このソリューションでは、真のタイプのみが必要ですが、のように別のフォントも含めたい場合、それを定義しても問題はありませんfont-awesome

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

37
TrueTypeに限定されず、.woffファイルもダウンロードするだけです。「http://themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff」をウェブブラウザに配置し、「/ fonts / Cantarell-Bold.woff」として保存し、一致するcss(url( '/ fonts / Canterell-Bold.woff'))
Anthony Briggs

2
Googleがいくつかのフォント形式を提供するのには理由があります。TrueTypeは古いブラウザでは機能しません。WOFFはW3C標準です。
Michael McGinnis 14

3
下にスクロールしてbashスクリプトソリューションに移動します。
MaxVölkel博士、2015

3
ファイルは、使用しているブラウザに応じて内容が変わります。
Krii

3
この応答は、以下に示す代替案よりも展開が複雑です。また、いくつかの点で技術的に正しくありません(TTFに制限がないこと、TTFは悪い考えです。これにより、ブラウザーごとに異なる結果が得られます。同じオリジンが適用されるため、フォントをパブリックにホストすることはできません)。それを行わないでください。以下の他の回答のいずれかを使用してください。
Robin Berjon、2015年

202

すべてのフォントバリアントのダウンロードに役立つツールlocalfont.comがあります。また、対応するCSSを生成して実装します。 非推奨

localfontがダウンしています。代わりに、Damirが示唆するようにgoogle-webfonts-helperを使用できます



素晴らしいが、あなたのフォントの他の言語バージョンを必要とするために発生したとき、あなたは別の解決策を見つけるために持っている
anges244

異なる文字セットはどうですか?
2016

1
ここで Google開発者は、Googleフォントのセルフホスティングには独自の欠点があると述べています。代わりに、これらのヒントを確認して、GoogleフォントCDNを使用し、ページの速度を上げてください。
shaijut 2016年

@PauloCoghiツールはWebサイトにアクセスできると報告する場合がありますが、私や他の多くの人はそれを表示できないため、明らかに何かが間違っています。
弁護士2017

147

すばらしい解決策はgoogle-webfonts-helper です。

複数のフォントバリアントを選択できるため、時間を大幅に節約できます。


素晴らしいツール!大好きです。フォントプレビューを表示し、必要なすべてのファイルをワンクリックでダウンロードできます。
2015

とても素敵なツールです。非常にうまく動作し、latin-extフォントもダウンロードできます。
piotrekkr 2016年

3
これが最良のオプションです。それはすべてを行い、フォントフォルダのプレフィックスを指定することもできます。
Maciej Krawczyk 2016年

63

私は、さまざまなユーザーエージェントを使用してGoogleのサーバーでCSSファイルをフェッチし、さまざまなフォント形式をローカルディレクトリにダウンロードして、それらを含むCSSファイルを書き込むbashスクリプト作成しました。このスクリプトにはBashバージョン4.xが必要です。

スクリプトについては、https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/を参照してください(ここでは再現していません。更新するだけです。必要なときに1か所)。

編集:https : //github.com/neverpanic/google-font-downloadに移動しました


4
これはもっと素晴らしいです!(私はそれがまだテストされていないうまくいくことを願っています)。私は何年にもわたってこのようなものを時々探しました。冗談ではありません。完全とはほど遠い独自のスクリプトを作成し始めました。これを望んでいる人はほとんどいません。Googleはこのフォントを生成された文字列の背後に隠しており、TTFのみのリポジトリにある実際のWebフォントファイルをオープンソースにしません。彼らは私たちに自分たちのフォントを使ってもらいたいし、人々を追跡するためにこれを悪用しているので、自分たちのサーバーも使ってほしいのです。そして、最もプライバシーを意識した人々でさえ、グーグルサーバーからフォントを埋め込みます。
redanimalwar 2015

1
私の唯一の関心事は、実際のフォントライセンスであり、実際に綿密に研究されていません。私が知っているのは、フォントライセンスがGPLやMITとは異なることです。では、実際に、Googleのサーバーからこのフォントをキャッチして、自分で提供することは合法的に許可されているのでしょうか。繰り返しますが、Googleが世界をより良くするためだけにこのすべてのフォントを提供しているとは少しも信じていません。彼らは実際に開発者にオープンフォントを生成するようにお金を払っています。そして、それがあなたのプライバシーを守らないのであれば、この方法でインターネットなしでローカルにこのフォントをテストすることができます。
redanimalwar 2015

2
このスクリプトは、localfont.comとは対照的に、すべてのフォント形式とサブセットをダウンロードできるため、この回答はさらに支持されるべきです。
piotrekkr 2016

私は怠惰な人として私を連れて行くことを知っていますが、平均的なWindowsユーザーとして、それをコンパイルする必要があり、それを使用できるようにするなどなど...
Lucas Bustamante

@LucasB関与するコンパイルはありません。これはbashスクリプトです。WindowsにはBashが付属していませんが、Windowsをサポートする方法でこれを再実装してください。それは単に私のユースケースの一部ではなかったので、私はそれに時間を費やしませんでした。
ネバーパニック

14

(インクルードURLの)CSSファイルの内容は、どのブラウザから表示するかによって異なります。たとえば、Chromeを使用してhttp://fonts.googleapis.com/css?family=Open+Sansにアクセスすると、ファイルにはWOFFリンクのみが含まれていました。以下のInternet Explorerを使用すると、EOTとWOFFの両方が含まれています。すべてのリンクをブラウザに貼り付けてダウンロードしました。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

独自のWebフォントをホストする場合は、各フォントタイプ正しくリンクし、レガシーブラウザのバグに対処する必要があります。GoogleWeb Fonts(Googleがホスト)を使用すると、Googleは自動的にそのブラウザの正しいフォントタイプにリンクします。


1
使用する「ユニバーサル」CSSコードと最新のブラウザー用の「縮小」コードを説明する記事へのリンクの+1!
ItalyPaleAle 2014年

2
そのため、私はブラウザーを異なる形式でスマートに提供する必要があります。私はこれが非常に落胆していることを知っていますが、私たちは一部の中国のクライアントに私たちのページを提供しており、それが私たちがホストしたい主な理由です。彼らはほとんどのグーグルリソースをブロックしました。
Lionel Chan

6

フォントのライセンス(通常はOFL)の条件を守る限り、法的に許可されます。

Webフォント形式のセットが必要であり、Font Squirrel Webfont Generatorはこれらを生成できます。

ただし、OFLではフォントが変更された場合にフォント名を変更する必要があり、ジェネレータを使用するとフォントが変更されます。


または、書体によっては、Webフォントキットをフォントリスから直接取得することもできます。fontsquirrel.com/fonts/open-sans
Jack Frost

3

@neverpanicと同様のPHPで記述されたスクリプトを使用して、GoogleからCSSとフォント(ヒントありとヒントなしの両方)の両方を自動的にダウンロードします。次に、ユーザーエージェントに基づいて、独自のサーバーから適切なCSSとフォントを提供します。独自のキャッシュを保持するため、ユーザーエージェントのフォントとCSSは一度だけダウンロードされます。

まだ時期尚早ですが、DaAwesomeP / php-offline-fontsで確認できます。


2

自分のサーバーですべてのフォント(またはその一部)をホストしたいので、このリポジトリからフォントをダウンロードして、好きなように使用します:https : //github.com/praisedpk/Local-Google-Fonts

Googleフォントに付属するレバレッジブラウザのキャッシュの問題を修正するためだけにこれを実行したい場合は、代替フォントCDNを使用して、次のようにフォントを含めることができます。

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

または特定のフォント:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />

1

グラントタスクでgrunt-local-googlefontを使用しました。

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

次に、それらを取得するには:

grunt local-googlefont:opensans

元のフォークを使用していることに注意してください。これは、名前に空白が含まれているフォントを取得するときにうまく機能します。


1

実際にすべてのフォント形式のバリアントをGoogleから直接ダウンロードし、CSSに含めてサーバーから提供することができます。そうすれば、Googleがサイトのユーザーを追跡することについて心配する必要はありません。しかし、マイナス面はおそらくあなた自身のサービング速度を遅くすることです。フォントはリソースをかなり要求します。この問題についてはまだテストを行っていないので、誰かが同じような考えを持っているのではないかと思います。




1

Webpackを使用している場合は、このプロジェクトに興味がある可能性があります。https//github.com/KyleAMathews/typefaces

たとえば、Robotoフォントを使用したいとします。

npm install typeface-roboto --save

次に、それをアプリのエントリポイント(メインのjsファイル)にインポートします。

import 'typeface-roboto'

1

PHPを使用して開発されたスクリプトに従うことができます。スクリプトを使用してGoogleフォントをダウンロードできる場所。フォントをダウンロードしてCSSファイルを作成し、zipにアーカイブします。
GitHub https://github.com/sourav101/google-fonts-downloaderからソースコードをダウンロードできます

$obj = new GoogleFontsDownloader;

if(isset($_GET['url']) && !empty($_GET['url']))
{
    $obj->generate($_GET['url']);
}

if(isset($_GET['download']) && !empty($_GET['download']) && $_GET['download']=='true')
{
    $obj->download();
}

/**
* GoogleFontsDownloader
* Easy way to download any google fonts.
* @author     Shohrab Hossain
* @version    1.0.0 
*/
class GoogleFontsDownloader
{
    private $url      = '';
    private $dir      = 'dist/';
    private $fontsDir = 'fonts/';
    private $cssDir   = 'css/';
    private $fileName = 'fonts.css';
    private $content  = '';
    private $errors   = '';
    private $success  = '';
    public  $is_downloadable  = false;

    public function __construct()
    {
        ini_set('allow_url_fopen', 'on');
        ini_set('allow_url_include', 'on');
    }

    public function generate($url = null)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) 
        {
            $this->errors .= "<li><strong>Invalid url!</strong> $url</li>";
        }
        else
        {
            $this->url = $url;
            // delete previous files
            $this->_destroy();
            // write font.css
            $this->_css();
            // write fonts
            $this->_fonts();
            // archive files
            $this->_archive();
        }  
        // show all messages
        $this->_message();
    }

    public function download()
    { 
        // Download the created zip file
        $zipFileName = trim($this->dir, '/').'.zip';
        if (file_exists($zipFileName))
        {
            header("Content-type: application/zip");
            header("Content-Disposition: attachment; filename = $zipFileName");
            header("Pragma: no-cache");
            header("Expires: 0");
            readfile("$zipFileName");

            // delete file 
            unlink($zipFileName);
            array_map('unlink', glob("$this->dir/*.*"));
            rmdir($this->dir);

        } 
    }   

    private function _archive()
    {
        if (is_dir($this->dir))
        {
            $zipFileName = trim($this->dir, '/').'.zip';
            $zip = new \ZipArchive(); 
            if ($zip->open($zipFileName, ZipArchive::CREATE) === TRUE) 
            {
                $zip->addGlob($this->dir. "*.*");
                $zip->addGlob($this->dir. "*/*.*");
                if ($zip->status == ZIPARCHIVE::ER_OK)
                {
                    $this->success .= '<li>Zip create successful!</li>';
                    $this->is_downloadable = true;
                }
                else 
                {
                    $this->errors .= '<li>Failed to create to zip</li>';
                } 
            } 
            else 
            {
                $this->errors .= '<li>ZipArchive not found!</li>';
            }  
            $zip->close(); 
        }
        else
        {
            $this->errors .= "<li><strong>File</strong> not exists!</li>";
        } 
    }   

    private function _css()
    {  
        $filePath = $this->dir.$this->cssDir.$this->fileName;
        $content  = $this->_request($this->url);
        if (!empty($content))
        {
            if (file_put_contents($filePath, $content))
            {
                $this->success .= "<li>$this->fileName generated successful!</li>";
                $this->content = $content; 
            }
            else
            {
                $this->errors .= '<li>Permission errro in $this->fileName! Unable to write $filePath.</li>';
            }
        }
        else
        {
            $this->errors .= '<li>Unable to create fonts.css file!</li>';
        }
    }

    private function _fonts()
    {
        if (!empty($this->content))
        {
            preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $this->content, $match);
            $gFontPaths = $match[0];
            if (!empty($gFontPaths) && is_array($gFontPaths) && sizeof($gFontPaths)>0)
            {
                $count = 0;
                foreach ($gFontPaths as $url) 
                {
                    $name     = basename($url);
                    $filePath = $this->dir.$this->fontsDir.$name;
                    $this->content = str_replace($url, '../'.$this->fontsDir.$name, $this->content);

                    $fontContent  = $this->_request($url);
                    if (!empty($fontContent))
                    {
                        file_put_contents($filePath, $fontContent);
                        $count++;
                        $this->success .= "<li>The font $name downloaded!</li>";
                    }
                    else
                    {
                        $this->errors .= "<li>Unable to download the font $name!</li>";
                    } 
                }

                file_put_contents($this->dir.$this->cssDir.$this->fileName, $this->content);
                $this->success .= "<li>Total $count font(s) downloaded!</li>";
            }
        }
    }

    private function _request($url)
    {
        $ch = curl_init(); 
        curl_setopt_array($ch, array(
            CURLOPT_SSL_VERIFYPEER => FALSE,
            CURLOPT_HEADER         => FALSE,
            CURLOPT_FOLLOWLOCATION => TRUE,
            CURLOPT_URL            => $url,
            CURLOPT_REFERER        => $url,
            CURLOPT_RETURNTRANSFER => TRUE,
        ));
        $result = curl_exec($ch);
        curl_close($ch);

        if (!empty($result))
        {
            return $result;
        } 
        return false;
    }

    private function _destroy()
    {
        $cssPath = $this->dir.$this->cssDir.$this->fileName;
        if (file_exists($cssPath) && is_file($cssPath))
        {
            unlink($cssPath);
        } 
        else
        {
            mkdir($this->dir.$this->cssDir, 0777, true);
        }

        $fontsPath = $this->dir.$this->fontsDir;
        if (!is_dir($fontsPath))
        {
            mkdir($fontsPath, 0777, true);
        }
        else
        {
            array_map(function($font) use($fontsPath) {
                if (file_exists($fontsPath.$font) && is_file($fontsPath.$font))
                {
                    unlink($fontsPath.$font);
                }
            }, glob($fontsPath.'*.*')); 
        }
    }

    private function _message()
    {
        if (strlen($this->errors)>0)
        {
            echo "<div class='alert alert-danger'><ul>$this->errors</ul></div>";
        }  
        if (strlen($this->success)>0)
        {
            echo "<div class='alert alert-success'><ul>$this->success</ul></div>";
        } 
    } 
}

0

k0pernicusに加えて、ベストサービスローカルを提案したいと思います。これは、bash(v4)スクリプトでもあり、Webサーバーオペレーターが自分のWebサーバーからGoogle Webフォントをダウンロードして提供できるようにします。ただし、他のbashスクリプトに加えて、ユーザーは最新のフォントファイルとcssファイルの提供を(cronなどを介して)完全に自動化できます。


0

プレーンJavaで書かれた非常にシンプルなスクリプトがあり、Google Web Fontリンクからすべてのフォントをダウンロードできます(複数のフォントがサポートされています)。また、CSSファイルをダウンロードしてローカルファイルに適合させます。ユーザーエージェントは、WOFF2以外のファイルも取得するように調整できます。https://github.com/ssc-hrep3/google-font-downloadを参照してください

結果のファイルは、ビルドプロセス(たとえば、のようなwebpackビルドvue-webpack)に簡単に追加できます。


0

ソースフォントはhttps://github.com/google/fontsからダウンロードできます

その後、font-rangerツールを使用して大きなUnicodeフォントを複数のサブセット(ラテン語、キリル文字など)に分割します。ツールで次のことを行う必要があります。

  • サポートする各言語のサブセットを生成します
  • ユニコード範囲のサブセットを使用して帯域幅を節約する
  • フォントから膨らみを取り除き、ウェブ用に最適化する
  • フォントを圧縮されたwoff2形式に変換する
  • 古いブラウザに.woffフォールバックを提供する
  • フォントの読み込みとレンダリングをカスタマイズする
  • @ font-faceルールを使用してCSSファイルを生成する
  • セルフホストWebフォントまたはローカルで使用

Font-Rangerhttps : //www.npmjs.com/package/font-ranger

PS Node.js APIを使用してこれを自動化することもできます

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.