Sejak masalah yang ditimbulkan dengan menggunakan Cufon saya memberanikan diri untuk tidak menggunakan sumber font eksternal, tetapi akhir-akhir ini, saya telah mencari metode alternatif untuk memuat font untuk melihat apakah ada cara yang lebih baik; metode yang lebih baik memiliki cara untuk muncul begitu saja.

Ada banyak metode baru di luar sana, dan variasi untuk setiap metode tampaknya; Haruskah saya menggunakan typekit ? atau google webfonts (dengan js atau css)? haruskah saya terus menggunakan font yang dimuat secara lokal (mis. metode yang dibuat fontquirrel.com)?

Saya akan mencantumkan metode yang tampaknya paling diterima dengan baik di bawah ini, dengan beberapa pengujian, tetapi apakah benar-benar layak untuk dipindahkan ke font web? Sepertinya ini akan membawa beban sumber daya yang lebih tinggi (permintaan http) dan memiliki jenis format file yang lebih sedikit (kompatibilitas kurang) dll. Tetapi sepertinya file dimuat async dan efisien dalam banyak kasus.

1. Apakah ini hanya masalah situasi dan kebutuhan? Jika ya, apakah itu?
2. Apakah ada perbedaan drastis antara metode ini?
3. Apakah ada metode yang lebih baik di luar sana yang belum saya daftarkan?
4. Apa pro / kontra untuk kinerja? Lihat? ketergantungan? kompatibilitas?

Saya benar-benar mencari praktik terbaik di sini, kinerja adalah hal yang penting, begitu juga skalabilitas dan kemudahan penggunaan. Belum lagi, tampilan dan nuansa.

Google CSS

• hanya menggunakan lembar gaya eksternal
• hanya menggunakan jenis file terkecil yang kompatibel
• dapat menggunakan @importatau <link>atau mengambil konten styleshee ( @font-face) dan memasukkannya langsung ke dalam lembar gaya Anda sendiri.

hasil tes

  78ms load of html
  36ms load of css

Metode Google JS

• digunakan webfont.jsuntuk memuat styleshet
• hanya menggunakan jenis file terkecil yang kompatibel
• menambahkan :rootelemen dengan kelas
• menambahkan skrip ke head.

hasil tes

    171ms load of html
    176ms load of js
    32ms load of css

Metode Typekit

• menambahkan :rootelemen dengan kelas.
• dapat menggunakan *.jscuplikan atau file *.jsfile yang dimuat secara eksternal
• menggunakan data:font/opentypealih-alih file font.
• menambahkan skrip ke head
• menambahkan css yang disematkan ke head

• menambahkan stylesheet eksternal ke head

  Anda dapat dengan mudah menambah / menghapus / menyesuaikan font dan pemilih yang ditargetkan dari typekit.com

hasil tes

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

… & Metode Font Squirrel

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

… Atau dengan data: metode font…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Pertama, saya akan menjelaskan sesuatu tentang penawaran Google. Ini benar-benar akan memuat format terkecil yang dapat ditangani browser Anda. WOFF menawarkan ukuran file kecil, dan browser Anda mendukungnya, jadi itulah yang Anda lihat. WOFF juga cukup banyak didukung. Namun, di Opera misalnya, Anda mungkin akan mendapatkan font versi TrueType.

Logika ukuran file juga, saya yakin, mengapa Font Squirrel mencobanya dalam urutan itu. Tapi itu sebagian besar spekulasi di pihak saya.

Jika Anda bekerja di lingkungan di mana setiap permintaan dan byte dihitung, Anda harus melakukan beberapa profil untuk mencari tahu mana yang terbaik untuk kasus penggunaan Anda. Akankah orang hanya melihat satu halaman, dan tidak pernah mengunjungi lagi? Jika demikian, aturan cache tidak terlalu penting. Jika mereka menjelajah atau kembali, Google mungkin memiliki aturan caching yang lebih baik daripada server Anda. Apakah latensi adalah masalah yang lebih besar, atau bandwidth? Jika latensi, bidik permintaan lebih sedikit, jadi hosting secara lokal dan gabungkan file sebanyak mungkin. Jika bandwidth, gunakan opsi mana pun yang berakhir dengan kode terkecil dan format font terkecil.

Sekarang, ke pertimbangan CSS vs JS. Mari kita lihat bagian HTML berikut:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

Dalam banyak kasus, script1, style1, dan style2akan memblokir. Ini berarti browser tidak dapat terus menampilkan dokumen hingga resource tersebut dimuat (meskipun browser modern memalsukannya sedikit). Yang sebenarnya bisa menjadi hal yang baik, terutama dengan stylesheet. Ini mencegah kilatan konten tanpa gaya, dan juga mencegah perubahan besar yang akan terjadi saat menerapkan gaya (dan menggeser konten benar-benar mengganggu sebagai pengguna).

Di sisi lain, script2tidak akan menghalangi. Ini dapat dimuat nanti, dan browser dapat melanjutkan ke penguraian dan menampilkan dokumen lainnya. Sehingga bisa bermanfaat juga.

Secara khusus berbicara tentang font (dan lebih khusus lagi, penawaran Google), saya mungkin akan tetap menggunakan metode CSS (saya suka @importkarena metode ini tetap menata gaya dengan stylesheet, tetapi itu bisa jadi hanya saya). File JS yang dimuat oleh skrip ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) lebih besar dari @font-facedeklarasi, dan sepertinya lebih banyak berfungsi. Dan saya tidak percaya memuat font sebenarnya itu sendiri (WOFF atau TTF) memblokir, jadi seharusnya tidak terlalu banyak menunda. Secara pribadi saya bukan penggemar berat CDN, tetapi faktanya mereka SANGAT cepat. Server Google akan mengalahkan sebagian besar paket hosting bersama dengan telak, dan karena font mereka sangat populer, orang-orang bahkan mungkin sudah menyimpannya dalam cache.

Dan hanya itu yang saya punya.

Saya tidak memiliki pengalaman dengan Typekit, jadi saya meninggalkannya dari teori saya. Jika ada ketidakakuratan, tidak menghitung generalisasi antar browser demi argumen, harap tunjukkan.

Saya pikir Anda telah membahas waktu muat dengan sangat baik dalam pertanyaan Anda. Dari sudut pandang saya, ada beberapa sumber yang harus ditambahkan ke daftar, dan beberapa pertimbangan lain yang harus diperiksa untuk mendapatkan gambaran lengkap tentang opsi.

Beberapa sumber font terkemuka lainnya

cloud.typography

http://www.typography.com/cloud/

Dari apa yang saya tahu, font disematkan sebagai data dalam file CSS:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

Berikut spesifikasi saya:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Berikut adalah deskripsi tingkat tinggi penerapan mereka .

Fonts.com

Saya belum pernah menggunakan layanan ini, tetapi mereka adalah vendor font yang sangat mapan, dan informasi yang mereka cantumkan di situs mereka cukup mengesankan. Saya tidak memiliki spesifikasi tentang metode pastinya, tetapi inilah yang saya tahu mereka miliki:

• Beberapa font paling terkenal di dunia tersedia
• Perpustakaan font yang sangat besar (lebih dari 20.000)
• Download font desktop untuk membuat mockup
• Alat khusus untuk menguji font web di browser
• Kontrol tipografi halus dan subsetting
• Opsi hosting mandiri

FontSpring

Berafiliasi dengan FontSquirrel. Font dapat dibeli di sini dengan harga tetap. File font yang disertakan dengan CSS dikirimkan, untuk digunakan di server Anda sendiri, seperti FontSquirrel.

Spesifikasi yang diperluas

Mengenai pro dan kontra keseluruhan dari setiap layanan font, berikut adalah beberapa perbandingan:

Ukuran Perpustakaan Font

• Fonts.com : 20.000+
• FontSpring : 1000+
• FontSquirrel : 300+
• Google : 600+
• Typekit : 900+
• Typography.com (cloud.typography.com): mungkin 300+ (35 keluarga)

Penetapan harga

• Fonts.com : $ 20 / bulan untuk 500.000 tampilan halaman
• FontSpring : Bervariasi berdasarkan font (pembelian font satu kali)
• FontSquirrel : Gratis
• Google : Gratis
• Typekit : $ 4 / bulan untuk 500.000 tampilan halaman
• Typography.com : $ 12,50 / bulan untuk 1.000.000 tampilan halaman

Kualitas Font

Kualitas font web dapat sedikit berbeda. Ini dapat mencakup hal-hal seperti bentuk huruf itu sendiri atau jarak atau ukuran kumpulan karakter. Semua ini menentukan kesan keseluruhan kualitas yang akan diberikan font. Meskipun opsi gratis memiliki beberapa opsi bagus, mereka juga memiliki beberapa font yang tidak berkualitas tinggi, jadi Anda ingin memilih dengan hati-hati dari sumber tersebut.

• Fonts.com : Tinggi
• FontSpring : Dicampur ke Tinggi
• FontSquirrel : Campuran
• Google : Campuran
• Typekit : Tinggi
• Typography.com : Sangat tinggi (Saya memberikan ini sebutan "sangat tinggi" karena Fonts.com, FontSpring, dan Typekit mendukung beberapa jenis pengecoran, di mana ini hanya font dari pengecoran H&FJ, yang termasuk yang terbaik di dunia)

Kualitas Font II: Tipografi

Ada banyak perbaikan dalam tipografi desktop yang sangat sulit didapat di font web. Beberapa dari layanan ini menawarkan cara untuk menyampaikannya.

• Fonts.com : kerning, spasi huruf, ligatur, karakter alternatif, pecahan, dll.
• FontSpring : Tidak ada
• FontSquirrel : Tidak ada
• Google : Tidak ada
• Typekit : Tidak ada
• Typography.com : huruf kecil, pengikat, karakter alternatif, gaya bilangan alternatif, pecahan, dll.

Dukungan browser

Ini sebagian besar tergantung pada format font yang didukung oleh setiap layanan. Yang utama adalah:

• EOT: untuk Internet Explorer (IE 4+)
• TrueType dan OpenType: Format tradisional (Safari 3.1+, FF 3.5+, Opera 10+)
• WOFF: Standar baru untuk font web (FF 3.6+, Chrome 5+)
• SVG: IOS <4.2

Informasi lebih lanjut di The @ Font-Face Rule Dan Trik Font Web yang Berguna

Semua layanan ini mendukung format font utama. Dengan font yang dihosting sendiri, selama Anda menggunakan sintaks yang benar, Anda harus dilindungi. Berikut pembaruan 2011 sintaks antipeluru dari FontSpring :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Kinerja I: Unduhan

Sejauh yang saya pahami, menggunakan sintaks di atas memungkinkan browser mengambil format tertentu yang sesuai untuk mereka, jadi tidak ada unduhan yang sia-sia pada format font yang tidak berfungsi.

Layanan berbayar seperti Fonts.com, Typekit, atau Typography.com menggunakan metode untuk mendeteksi format yang benar dan kemudian mengirimkan format font yang tepat, sering kali sebagai data base64 dalam file CSS.

Dari apa yang saya lihat, perbedaan dalam metode yang Anda cantumkan di atas cukup dapat diabaikan untuk pengguna internet berkecepatan tinggi (sepertinya perbedaan <200 md), tetapi mungkin layak dipertimbangkan untuk perangkat di jaringan yang lebih lambat, terutama untuk klik halaman yang tidak di-cache.

Kinerja II: Subsetting

Jika Anda tahu bahwa hanya akan ada karakter tertentu yang ingin Anda gunakan, Anda dapat membuat font dengan subset karakter dan dengan demikian mengurangi ukuran unduhan.

• Fonts.com : Kontrol yang sangat detail
• FontSpring : Dapat mengkompilasi ulang sebagai subset melalui generator font web FontSquirrel
• FontSquirrel : Dapat mengkompilasi ulang sebagai subset melalui generator font web
• Google : Kontrol yang sangat detail
• Typekit : opsi terbatas "semua karakter" atau "default"
• Typography.com : Kontrol yang sangat detail

Kinerja III: Pengiriman

• Fonts.com : CDN global atau server Anda sendiri
• FontSpring : Berdasarkan server Anda
• FontSquirrel : Berdasarkan server Anda
• Google : Super-CDN global
• Typekit : CDN Global
• Typography.com : CDN Global (125.000 server)

Dukungan bahasa

• Fonts.com : 40 bahasa, termasuk Asia dan Timur Tengah
• FontSpring : Barat, tergantung font
• FontSquirrel : Western, tergantung fontnya
• Google : Barat, tergantung font
• Typekit : Barat, tergantung fontnya
• Typography.com : Barat, tergantung fontnya

Pengujian dan Implementasi

• Fonts.com : Sangat mudah, dengan alat yang luas dan dapat disesuaikan
• FontSpring : Teknis (lakukan sendiri)
• FontSquirrel : Teknis (lakukan sendiri)
• Google : Mudah
• Typekit : Mudah
• Typography.com : Pengujian mudah, sedikit lebih terlibat untuk berubah setelah diterapkan

Nah, seperti yang Anda kejar

... mencari praktik terbaik di sini, kinerja adalah hal yang penting, begitu juga skalabilitas dan kemudahan penggunaan. Belum lagi, tampilan dan nuansa.

jawabannya adalah (seperti biasa dalam desain web): Tergantung!

Satu hal yang pasti adalah, saya tidak akan merekomendasikan untuk menggunakan pendekatan JS (ditunjukkan dalam contoh kedua Anda).

Secara pribadi saya tidak suka membuat hal-hal presentasi dan gaya CSS tergantung pada Javascript, meskipun sebagian besar pengguna telah mengaktifkannya. Ini adalah pertanyaan untuk tidak mencampurkan banyak hal.

Dan seperti yang Anda lihat di contoh yang diberikan, ada semacam FOUC (flas konten tanpa gaya), karena halaman sudah dirender oleh browser sebelum font tersedia. Segera setelah itu, halaman digambar ulang. Dan semakin besar situs, semakin besar dampak (kinerja)!

Jadi saya tidak akan pernah menggunakan solusi JS untuk penyematan font.

Sekarang mari kita lihat metode CSS murni.
Sudah cukup lama inilah pembahasan tentang "vs. @import". Secara pribadi saya lebih suka menghindari penggunaan @import dan selalu gunakan <link>saja. Tapi ini terutama soal preferensi pribadi. Satu hal yang memang tidak boleh Anda lakukan adalah mencampurkan keduanya!

Lokal vs. CDN
Ketika memutuskan apakah akan meng-host file font Anda secara lokal atau menggunakan CDN, maka imho sebagian besar tergantung pada jumlah font yang berbeda dan font yang ingin Anda sematkan.

Mengapa ini penting, atau berperan?
Dari sudut pandang kinerja, saya akan merekomendasikan untuk menyertakan font Base64 yang dikodekan dalam lembar gaya (satu) Anda. Tetapi hanya format .woff, karena ini digunakan oleh hampir semua browser modern, yang berarti bagi sebagian besar pengunjung Anda. Untuk semua pengguna lain tinggal dengan permintaan tambahan.

Namun karena "overhead" yang disebabkan oleh pengkodean Base64 dan ukuran file font (bahkan dalam format .woff) teknik ini hanya boleh digunakan, jika Anda memiliki tidak lebih dari 3 atau 4 font yang berbeda. Dan selalu pastikan, bahwa server Anda mengirimkan file (CSS) dengan gzip.

Keuntungan besar dari melakukannya adalah Anda tidak memiliki permintaan tambahan untuk file font. Dan setelah pemuatan halaman pertama (tidak peduli halaman mana dari situs Anda) file CSS di-cache. Ini juga merupakan keuntungan jika Anda menggunakan cache aplikasi HTML5 (yang pasti akan Anda lakukan).

Selain fakta bahwa seorang penulis tidak boleh menggunakan lebih dari maksimal 3 atau 4 font berbeda di situsnya, mari kita lihat cara menggunakan CDN Google.

Pertama-tama ketahuilah, bahwa Anda dapat (dan selalu harus) menyertakan semua font yang diinginkan menjadi satu <link>, seperti:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

Ini akan menghasilkan respons berikut:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

Seperti yang Anda lihat, ada 9 file font yang berbeda, yang berarti total 10 permintaan (termasuk salah satu elemen link), jika pengguna tidak memiliki satu atau lebih font yang diminta diinstal secara lokal. Dan permintaan ini diulangi di setiap permintaan halaman baru ke situs Anda (meskipun tidak ada lagi data yang ditransfer)! Juga tanggapan atas permintaan <link>tidak pernah disimpan dalam cache.

Rekomendasi:
Bagaimanapun, saya benar-benar akan merekomendasikan untuk menyertakan file font Anda dalam format .woff Base64 yang dikodekan dalam style sheet Anda!

Lihat artikel bagus ini untuk contoh dan deskripsi tentang cara melakukannya!

Saya menggunakan metode css inline karena biaya overhead permintaan tambahan lebih dari peningkatan ukuran saat pengkodean bease64. Ini juga selanjutnya diimbangi oleh kompresi gizip oleh server file css.

Pilihan lainnya adalah menggunakan pemuatan font yang tidak sinkron tetapi paling sering pengguna akan melihat font muncul setelah dimuat.

Terlepas dari metodenya, Anda dapat mengurangi ukuran file font hanya dengan memasukkan set karakter yang akan Anda gunakan.

Secara pribadi saya menggunakan Google Fonts. Mereka memiliki beragam pilihan yang bagus dan mereka baru-baru ini meningkatkan kompresi pada font dengan pindah ke kompresi Zopfli juga. Google sedang berusaha untuk membuat web lebih cepat, jadi saya kira lebih banyak pengoptimalan pada bagian itu akan datang dari mereka juga.

Apa pun yang Anda pilih sebagai pengiriman font yang dialihdayakan, Anda akan selalu mendapatkan pengurangan kecepatan dengan permintaan untuk mendapatkan font. Hal terbaik, dilihat dari perspektif kecepatan, akan menyajikan font itu sendiri. Jika Anda tidak peduli dengan milidetik ekstra yang diperlukan untuk memuat dari pengiriman yang dialihdayakan, Anda harus menggunakannya jika menurut Anda kemudahan penggunaannya sepadan dengan milidetik.

Saya tidak tahu tentang Typekit dan yang lainnya, tetapi dengan Google Fonts Anda dapat memilih untuk dilayani subset tertentu dan berbagai karakter untuk lebih mempercepat pengiriman.

Memilih subset:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

Memilih berbagai karakter:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

Anda dapat menggunakan dns-prefetch untuk meningkatkan kecepatan lebih jauh dengan pengiriman font.

Saya berpikir, dan berharap, bahwa Google akan melakukan semua yang mereka bisa untuk mempercepat pengiriman font mereka sebanyak yang mereka bisa. Milidetik yang diperlukan untuk memuatnya tidak merusak situs web saya, jadi saya dengan senang hati menggunakannya.

Singkat cerita:

Jika pengiriman font milidetik merugikan situs Anda, misalnya dengan membuatnya memuat lebih dari 1 detik yang disarankan, saya pikir Anda harus menghostingnya sendiri.

Opsi terbaik adalah mengimpor font menggunakan ajax, seperti ini:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

Saya melakukan ini di halaman web saya dan meningkatkan 9 poin dalam tes Google Insights.