Bagaimana cara menambahkan font non-standar ke situs web?

519

Apakah ada cara untuk menambahkan beberapa font khusus pada situs web tanpa menggunakan gambar, Flash , atau gambar lain?

Misalnya, saya sedang mengerjakan situs web pernikahan, dan saya menemukan banyak font bagus untuk subjek itu. Tetapi saya tidak dapat menemukan cara yang tepat untuk menambahkan font di server. Dan bagaimana cara saya memasukkan font dengan CSS ke dalam HTML? Apakah ini mungkin dilakukan tanpa gambar?

html css fonts font-face vaske
sumber
18
Sejak pertanyaan ini diajukan, @font-facetelah menjadi jauh lebih banyak didukung dan direkomendasikan untuk penggunaan umum. Anda hanya perlu menyadari bahwa IE memerlukan font dalam format berbeda dengan browser lain. Lihat stackoverflow.com/questions/2219916/is-font-face-usable-now
David Johnstone
10
Pastikan Anda memiliki hak untuk mendistribusikan font!
Viet
2
Kunjungi typekit.com , atau untuk fontsquirrel.com
bjudson
1
stackoverflow.com/questions/8050640/…
Adrien Be
3
www.fontsquirrel.com tampaknya hebat untuk menghasilkan file font yang diperlukan & membuat sintaks @fontface-proof yang bagus (sama seperti fontspring.com/blog/fixing-ie9-font-face-problems ) yang direkomendasikan
Adrien Be

Jawaban:

500

Ini dapat dilakukan melalui CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Ini didukung untuk semua browser biasa jika Anda menggunakan TrueType-Fonts (TTF) atau Web Open Font Format (WOFF).

hangy
sumber
13
Baik Internet Explorer dan Firefox TIDAK berdasarkan Webkit, jadi menurut saya ini solusi yang tidak berguna.
Casper
58
Ini tidak sia-sia karena standar: semakin Anda mengimplementasikannya, semakin besar kemungkinan akan diterapkan oleh browser. Itu tidak berarti Anda tidak harus mencari cara lain untuk mengkompensasi, tetapi menggunakan ini sebagai pelengkap tampaknya baik bagi saya.
e-satis
8
Namun, Firefox 3.1 mendukung @ font-face.
Ms2ger
2
@brendanjerwin: versi terbaru dari tautan Anda - brendanjerwin.com/development/web/2009/03/03/…
Matt Ball
60
Hai teman-teman, coba tebak? Sekarang hampir 2016! Sekarang didukung secara luas! Yay! Senang, saya menemukan jawaban ini selarut ini. Ha ha.
jessica
121

Anda dapat menambahkan beberapa font melalui Google Web Fonts .

Secara teknis, font di-host di Google dan Anda menautkannya di header HTML. Kemudian, Anda dapat menggunakannya secara bebas di CSS dengan @font-face( baca tentang hal itu ).

Sebagai contoh:

Di <head>bagian:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Kemudian di CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

Solusinya tampaknya cukup dapat diandalkan (bahkan Smashing Magazine menggunakannya untuk judul artikel. ). Namun, sejauh ini tidak banyak font yang tersedia di Direktori Font Google .

Michał Pękała
sumber
1
Pada Juli 2014, google telah memperluas font dan menyertakan font Google Noto yang mendukung sebagian besar bahasa google.com/get/noto/# . Abobe telah mendukung inisiatif font terbuka ini yang mendukung semua bahasa blog.typekit.com/2014/07/15/introducing-source-han-sans
vsingh
tampaknya (font web Google) tidak mendukung versi font .eot dan .woff dan .svg. itu hanya mendukung versi font .ttf!
Mahdi Jazini
77

Cara untuk pergi adalah menggunakan deklarasi CSS @ font-face yang memungkinkan penulis untuk menentukan font online untuk menampilkan teks pada halaman web mereka. Dengan mengizinkan penulis untuk menyediakan font mereka sendiri, @ font-face menghilangkan kebutuhan untuk bergantung pada jumlah font yang telah diinstal pengguna di komputer mereka.

Lihatlah tabel berikut:

masukkan deskripsi gambar di sini

Seperti yang Anda lihat, ada beberapa format yang perlu Anda ketahui terutama karena kompatibilitas lintas-browser. Skenario di perangkat seluler tidak jauh berbeda.

Solusi:

1 - Kompatibilitas peramban lengkap

Ini adalah metode dengan dukungan terdalam yang mungkin saat ini:

@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 */
}

2 - Sebagian besar browser

Namun, banyak hal bergeser ke arah WOFF , jadi Anda mungkin bisa lolos:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Hanya browser terbaru

Atau bahkan hanya WOFF.
Anda kemudian menggunakannya seperti ini:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Referensi dan bacaan lebih lanjut:

Itu terutama yang perlu Anda ketahui tentang penerapan fitur ini. Jika Anda ingin meneliti lebih lanjut tentang masalah ini, saya akan mendorong untuk melihat sumber daya berikut. Sebagian besar dari apa yang saya taruh di sini diambil dari berikut ini

Javier Cadiz
sumber
2
Alat Tupai Font yang sangat berguna dapat menghasilkan CSS yang dibutuhkan untuk dukungan browser penuh. Bahkan memungkinkan Anda mengunggah font sebagai salah satu format ini, mengonversinya ke semua format lain, dan memungkinkan Anda mengunduh semuanya. Ini adalah penyelamat ketika datang ke font khusus.
Jacob Stamm
Apa artinya svgFontName? Haruskah saya mengubahnya ke nama keluarga font saya atau membiarkannya apa adanya?
Gherman
17

Jika dengan font yang tidak standar, maksud Anda font khusus dari format standar, inilah cara saya melakukannya, dan itu berfungsi untuk semua browser yang telah saya periksa sejauh ini:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

jadi Anda hanya perlu font ttf dan eot. Beberapa alat yang tersedia online dapat melakukan konversi.

Tetapi jika Anda ingin melampirkan font dalam format yang tidak standar (bitmap dll), saya tidak dapat membantu Anda.

BiAiB
sumber
1
Contoh alat daring: kirsle.net/wizards/ttf2eot.cgi Contoh alat offline: code.google.com/p/ttf2eot/wiki/Demo - Anda juga dapat menggunakan font WOFF .
Wilf
11

Saya telah menemukan bahwa cara termudah untuk menggunakan font yang tidak standar di situs web adalah dengan menggunakan sIFR

Itu memang melibatkan penggunaan objek Flash yang berisi font, tetapi terdegradasi dengan baik ke teks / font standar jika Flash tidak diinstal.

Gaya diatur dalam CSS Anda, dan JavaScript mengatur penggantian Flash untuk teks Anda.

Sunting: (Saya masih merekomendasikan menggunakan gambar untuk font yang tidak standar karena sIFR menambah waktu untuk sebuah proyek dan dapat memerlukan pemeliharaan).

Mat
sumber
24
Ide yang sangat buruk! Saya memiliki flash di browser saya tetapi juga flashblock. Di situs web itu, browser saya menampilkan halaman yang rusak parah. Flash seharusnya menyimpan sesuatu yang Anda gunakan untuk animasi atau film besar. Terlalu banyak flash sangat aneh dan visual, my my ...
e-satis
2
@ e-satis: Bagaimana bisa begitu? Secara pribadi, saya tidak pernah melihat perbedaan antara halaman yang menggunakan sIFR dan yang tidak, selain dari perbedaan rendering teks halus. Saya pikir itu ide yang bagus, jujur, meskipun @font-facejauh lebih baik jika didukung.
Sasha Chedygov
"Sunting: (Saya masih merekomendasikan penggunaan gambar untuk font yang tidak standar karena sIFR menambah waktu untuk sebuah proyek dan dapat memerlukan pemeliharaan)." kata sangat baik. sIFR adalah teknik yang sangat keren tetapi tampaknya membutuhkan banyak untuk mendapatkan tampilan PERSIS yang Anda inginkan. Jika Anda punya waktu untuk belajar dan menguasai teknik ini, saya akan sangat merekomendasikannya. Tetapi jika Anda mencari teknik penggantian font yang cepat dan mudah, saya akan menggunakan penggantian gambar atau bahkan properti css @ font-face
Derek Adair
10

Typeface.js dan Cufon adalah dua opsi menarik lainnya. Mereka adalah komponen JavaScript yang merender data font khusus dalam format JSON (yang dapat Anda konversi dari format TrueType atau OpenType di situs web mereka) melalui elemen <canvas> baru di semua browser yang lebih baru kecuali Internet Explorer dan via VML di Internet Explorer.

Masalah utama dengan keduanya (seperti yang sekarang) adalah bahwa memilih teks tidak berfungsi atau setidaknya hanya bekerja dengan canggung.

Tetap saja, ini sangat bagus untuk berita utama. Teks tubuh ... Saya tidak tahu.

Dan ini sangat cepat.

Thomas
sumber
Pilihan lain yang menarik adalah konsep serupa typekit.com.
Zack
8

Atau Anda bisa mencoba sIFR . Saya tahu ini menggunakan Flash, tetapi hanya jika tersedia. Jika Flash tidak tersedia, ini akan menampilkan teks asli dalam font aslinya (CSS).

Casper
sumber
4

Teknik yang direkomendasikan W3C untuk melakukan ini disebut "embedding" dan dijelaskan dengan baik oleh tiga artikel di sini: Embedding Fonts . Dalam percobaan terbatas saya, saya telah menemukan proses ini rawan kesalahan dan memiliki keberhasilan yang terbatas dalam membuatnya berfungsi dalam lingkungan multi-browser.

Steve Moyer
sumber
4

Safari dan Internet Explorer keduanya mendukung aturan CSS-font-face, namun mereka mendukung dua jenis font tertanam yang berbeda. Firefox berencana untuk mendukung tipe yang sama dengan Apple dalam waktu dekat. SVG dapat menyematkan font tetapi belum didukung secara luas (tanpa plugin).

Saya pikir solusi paling portabel yang pernah saya lihat adalah menggunakan fungsi JavaScript untuk mengganti pos dll. Dengan gambar yang dihasilkan dan di-cache di server dengan font pilihan Anda - dengan cara itu Anda cukup memperbarui teks dan tidak perlu barang-barang di Photoshop.

Zobier
sumber
Ini tidak harus dilakukan dengan JavaScript. Saya tahu bahwa banyak orang suka menggunakan JavaScript untuk beberapa hal saat ini, tetapi teknik CSS standar mungkin lebih tepat di sini. Lihat sitepoint.com/article/header-images-css-xhtml
hangy
Maaf jika ada kebingungan, teknik ini tidak mengacu pada metode penggantian gambar yang, seperti yang Anda katakan, dapat berupa CSS. Ini adalah tentang menghasilkan grafik yang mewakili string yang diberikan dalam font / style tertentu, dengan cepat, di server - menghindari kebutuhan untuk membuat ini secara manual.
zobier
4

Jika Anda menggunakan ASP.NET, sangat mudah untuk menghasilkan font berbasis gambar tanpa benar-benar harus menginstal (seperti menambahkan ke basis font yang diinstal) font pada server dengan menggunakan:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

dan kemudian menggambar dengan font itu ke a Graphics.

mattlant
sumber
1
baik, ya ... Dan pengguna Anda bisa lupa menyalin dan menempel. Dan memperbesar juga, di browser lama. Saya bahkan tidak berbicara tentang masalah bandwidth!
e-satis
2
Ya, ok, dan pertanyaannya menentukan apakah akan menggunakannya untuk teks konten? Tidak, itu bukan pertanyaan umum, dan ini adalah jawaban umum. Cuplikan kecil teks, tajuk, dll., Tidak memakan banyak bandwidth. Sheesh, dapatkan pegangan!
mattlant
3

Sepertinya hanya berfungsi di Internet Explorer, tetapi pencarian cepat Google untuk menghasilkan "font html embed" http://www.spoono.com/html/tutorials/tutorial.php?id=19

Jika Anda ingin tetap platform-agnostik (dan Anda harus!) Anda harus menggunakan gambar, atau hanya menggunakan font standar.

James Muscat
sumber
3

Saya melakukan sedikit riset dan menggali Dynamic Text Replacement (diterbitkan 2004-06-15).

Teknik ini menggunakan gambar, tetapi tampaknya "bebas tangan". Anda menulis teks Anda, dan Anda membiarkan beberapa skrip otomatis mencari dan mengganti secara otomatis pada halaman untuk Anda dengan cepat.

Ini memiliki beberapa keterbatasan, tetapi mungkin salah satu pilihan yang lebih mudah (dan lebih banyak browser yang kompatibel) daripada semua yang pernah saya lihat.

Kent Fredric
sumber
3

Dimungkinkan juga untuk menggunakan font WOFF - contoh di sini

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
Wilf
sumber
3

Cukup sediakan tautan ke font yang sebenarnya seperti ini dan Anda akan baik-baik saja

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
Abhijeet Kumar
sumber
Alternatif sederhana yang bagus. Dan Anda yakin memiliki hak untuk menggunakannya. Lihat developers.google.com/fonts/docs/getting_started
Tim Erickson
2

Cara JavaScript Typeface.js:

Dengan typeface.js Anda dapat menyematkan font khusus di halaman web Anda sehingga Anda tidak perlu merender teks ke gambar

Alih-alih membuat gambar atau menggunakan flash hanya untuk menampilkan teks grafik situs Anda dalam font yang Anda inginkan, Anda dapat menggunakan typeface.js dan menulis dalam HTML dan CSS biasa, seperti jika pengunjung Anda memasang font secara lokal.

http://typeface.neocracy.org/

bakkal
sumber
2

Jika Anda memiliki file font Anda, maka Anda perlu menambahkan lebih banyak format font untuk browser lain.

Untuk tujuan ini saya menggunakan generator font seperti Fontsquirrel yang menyediakan semua format font & CSS @ font-face-nya, Anda hanya perlu menyeret & meletakkannya ke file CSS Anda.

saadeez
sumber