Bagaimana cara meng-host font web google di server saya sendiri?

Saya perlu menggunakan beberapa font google pada aplikasi intranet. Klien mungkin atau mungkin tidak memiliki koneksi internet. Membaca ketentuan lisensi, tampaknya diizinkan secara hukum.

Harap diingat bahwa jawaban saya sudah tua.

Ada jawaban lain yang lebih canggih secara teknis di bawah ini, misalnya:

• neverpanic / google-font-download
• google-webfont-helper
• localfont

jadi jangan biarkan fakta bahwa ini adalah jawaban yang diterima saat ini memberi Anda kesan bahwa ini masih yang terbaik.

Anda juga sekarang dapat mengunduh seluruh set font google via pada github di repositori google / font mereka . Mereka juga memberikan snapshot zip ~ 420MB font mereka .

Pertama-tama Anda mengunduh pilihan font sebagai paket zip, memberi Anda banyak jenis font yang benar. Salin di suatu tempat publik, di suatu tempat Anda dapat menautkan dari css Anda.

Pada halaman unduhan google webfont, Anda akan menemukan tautan sertakan seperti:

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

Itu tautan ke CSS mendefinisikan font melalui sekelompok definisi @font-face.

Buka di browser untuk menyalin dan menempelkannya ke CSS Anda sendiri dan memodifikasi url untuk memasukkan file font yang tepat dan jenis format.

Jadi ini:

@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');
}

menjadi ini:

/* 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');
}

Seperti yang Anda lihat, kelemahan hosting font-font di sistem Anda sendiri dengan cara ini adalah, Anda membatasi diri Anda pada format tipe yang sebenarnya, sedangkan layanan google webfont ditentukan oleh perangkat pengakses yang formatnya akan ditransmisikan.

Selain itu, saya harus menambahkan .htaccessfile ke direktori saya yang memegang font yang berisi tipe mime untuk menghindari kesalahan muncul di Alat Dev Chrome.

Untuk solusi ini, hanya tipe sejati yang diperlukan, tetapi mendefinisikan lebih banyak tidak ada salahnya bila Anda ingin memasukkan font yang berbeda juga font-awesome.

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

Ada alat localfont.com untuk membantu Anda mengunduh semua varian font. Itu juga menghasilkan CSS yang sesuai untuk implementasi. usang

localfont sedang down. Sebaliknya, seperti yang disarankan Damir , Anda dapat menggunakan google-webfonts-helper

Solusi hebat adalah google-webfonts-helper .

Ini memungkinkan Anda untuk memilih lebih dari satu varian font, yang menghemat banyak waktu.

Saya menulis skrip bash yang mengambil file CSS di server Google dengan agen pengguna yang berbeda, mengunduh berbagai format font ke direktori lokal dan menulis file CSS termasuk di dalamnya. Perhatikan bahwa skrip membutuhkan Bash versi 4.x.

Lihat https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ untuk skrip (saya tidak mereproduksi di sini jadi saya hanya perlu memperbaruinya di satu tempat ketika saya perlu).

Sunting: Pindah ke https://github.com/neverpanic/google-font-download

Isi file CSS (dari URL sertakan) tergantung pada apa browser saya melihatnya. Misalnya, saat menjelajah ke http://fonts.googleapis.com/css?family=Open+Sans menggunakan Chrome, file tersebut hanya berisi tautan WOFF. Menggunakan Internet Explorer (di bawah), itu termasuk EOT dan WOFF. Saya menempelkan semua tautan ke browser saya untuk mengunduhnya.

@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');
}

Ketika Anda meng-host font web Anda sendiri, Anda perlu menautkan dengan benar ke setiap jenis font , menangani bug browser lama, dll. Ketika Anda menggunakan Google Web Fonts (dihosting oleh Google), Google secara otomatis menautkan ke jenis font yang benar untuk browser itu.

Ini diizinkan secara hukum selama Anda tetap pada ketentuan lisensi font - biasanya OFL.

Anda akan memerlukan satu set format font web, dan Font Squirrel Webfont Generator dapat menghasilkan ini.

Tetapi OFL mengharuskan font diganti nama jika diubah, dan menggunakan generator berarti mengubahnya.

Saya memiliki skrip yang ditulis dalam PHP mirip dengan @neverpanic yang secara otomatis mengunduh CSS dan font ( keduanya disiratkan dan tidak dihancurkan ) dari Google. Kemudian melayani CSS dan font yang benar dari server Anda sendiri berdasarkan pada Agen Pengguna. Itu menyimpan cache sendiri, jadi font dan CSS dari Agen Pengguna hanya akan diunduh sekali.

Ini masih dalam tahap prematur, tetapi dapat ditemukan di sini: DaAwesomeP / php-offline-fonts

Karena Anda ingin meng-host semua font (atau beberapa font) di server Anda sendiri, Anda mengunduh font dari repo ini dan menggunakannya seperti yang Anda inginkan: https://github.com/praisedpk/Local-Google-Fonts

Jika Anda hanya ingin melakukan ini untuk memperbaiki masalah caching peramban leverage yang menyertai Google Font, Anda dapat menggunakan font-font alternatif CDN , dan memasukkan font-font sebagai:

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

Atau font tertentu, seperti:

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

Saya menggunakan grunt-local-googlefont dalam tugas kasar.

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');
 };

Kemudian, untuk mengambilnya:

grunt local-googlefont:opensans

Catatan, saya menggunakan garpu dari aslinya, yang berfungsi lebih baik saat mengambil font dengan spasi putih di namanya.

Anda sebenarnya dapat mengunduh semua varian format font langsung dari Google dan memasukkannya ke css untuk ditayangkan dari server Anda. Dengan begitu Anda tidak perlu khawatir tentang Google yang melacak pengguna situs Anda. Namun, sisi negatifnya mungkin memperlambat kecepatan penyajian Anda sendiri. Font cukup menuntut sumber daya. Saya belum melakukan tes dalam masalah ini, dan bertanya-tanya apakah ada yang memiliki pemikiran serupa.

Solusi saya adalah mengunduh file TTF dari font web google dan kemudian menggunakan onlinefontconverter.com .

Saya membuat skrip PHP kecil untuk mendapatkan tautan unduhan dari Google Fonts URL impor CSS seperti: https ://fonts.googleapis.com/css?family=Roboto:400,700| Slabo+27px| Lato: 400,300italic, 900italic

Anda dapat menggunakan alat ini di sini: http://nikoskip.me/gfonts.php

Misalnya, jika Anda menggunakan URL impor di atas, Anda akan mendapatkan ini:

Jika Anda menggunakan Webpack, Anda mungkin tertarik dengan proyek ini: https://github.com/KyleAMathews/typefaces

Misalnya, Anda ingin menggunakan font Roboto:

npm install typeface-roboto --save

Kemudian cukup impor di titik masuk aplikasi Anda (file js utama):

import 'typeface-roboto'

Anda dapat mengikuti skrip yang dikembangkan menggunakan PHP. Di mana Anda dapat mengunduh font google apa pun dengan menggunakan skrip. Ini akan mengunduh font dan membuat file CSS dan arsip ke zip.
Anda dapat mengunduh kode sumber dari 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>";
        } 
    } 
}

Selain k0pernicus, saya ingin menyarankan yang terbaik dilayani-lokal . Ini juga merupakan skrip bash (v4) untuk memungkinkan operator server web mengunduh dan menyajikan font web Google dari server web mereka sendiri. Tetapi di samping skrip bash lainnya, ini memungkinkan pengguna untuk secara otomatis mengotomatisasi (melalui cron dan semacamnya) penyajian file font dan file css yang terbaru.

Ada skrip yang sangat sederhana, ditulis dalam Java, untuk mengunduh semua font dari tautan Google Web Font (didukung banyak font). Ini juga mengunduh file CSS dan menyesuaikannya dengan file lokal. Agen-pengguna dapat diadaptasi untuk mendapatkan juga file lain selain WOFF2 saja. Lihat https://github.com/ssc-hrep3/google-font-download

File yang dihasilkan dapat dengan mudah ditambahkan ke proses build (mis. Like webpack build vue-webpack).

Anda dapat mengunduh fonta sumber dari https://github.com/google/fonts

Setelah itu gunakan font-rangeralat untuk membagi font Unicode besar Anda menjadi beberapa himpunan bagian (misalnya latin, cyrillic). Anda harus melakukan yang berikut dengan alat ini:

• Buat subset untuk setiap bahasa yang Anda dukung
• Gunakan sub-rentang unicode untuk menghemat bandwidth
• Hapus bloat dari font Anda dan optimalkan untuk web
• Ubah font Anda ke format woff2 terkompresi
• Berikan .woff fallback untuk browser lama
• Kustomisasi pemuatan dan rendering font
• Hasilkan file CSS dengan aturan @ font-face
• Host-sendiri font web atau gunakan secara lokal

Font-Ranger : https://www.npmjs.com/package/font-ranger

PS Anda juga dapat mengotomatisasi ini menggunakan Node.js API