Menerapkan satu font ke seluruh situs web dengan CSS

93

Saya ingin menggunakan satu fonta bernama "Aljazair" di seluruh situs web saya. Jadi, saya perlu mengubah semua tag HTML dan saya tidak ingin menulis kode yang berbeda untuk tag yang berbeda seperti:

button{font-family:Algerian;}
div{font-family:Algerian;}

Metode yang ditulis di bawah ini juga sangat tidak disarankan:

div,button,span,strong{font-family:Algerian;}
html css fonts font-face Michelle Smith
sumber
3
font-family adalah nilai yang diwariskan, jadi mengapa tidak mendefinisikannya di tubuh saja?
Anda mungkin ingin memilih jawaban dari Jukka K. Korpela. Ini lebih awal dari jawaban yang dipilih saat ini, selama sekitar satu bulan, dan memiliki konten yang hampir sama.
okm
kemungkinan duplikat dari Bagaimana Menerapkan font global ke seluruh dokumen HTML
davidcondrey
Saya sarankan Anda tidak pernah menggunakan jawaban (Jan Hančič) karena ini menerapkan font Anda ke semua tag html bahkan tag yang tidak ingin Anda ubah. misalnya: jika Anda membuat tag img di dalam tag td dan membuatnya menjadi text-align: center dan vertical-align: middle. menggunakan cara ini tag img Anda tidak akan pernah menjadi pusat TD. cara terbaik: periksa dokumen Anda dan cukup terapkan format font ke tag yang memiliki teks di dalamnya
Mahdi Jazini

Jawaban:

117

Letakkan font-familydeklarasi menjadi bodypemilih:

body {
  font-family: Algerian;
}

Semua elemen di halaman Anda akan mewarisi font-family ini (kecuali, tentu saja Anda menimpanya nanti).

Jan Hančič
sumber
11
Sebuah elemen mewarisi font-familydari induknya hanya jika tidak ada style sheet yang mengatur font family untuk elemen tersebut. Browser style sheet biasanya diatur font keluarga setidaknya untuk input, textarea, code, tt, dan preunsur-unsur.
Jukka K. Korpela
Kamu benar. Saya telah bekerja dengan pengaturan ulang CSS begitu lama sehingga saya lupa hal-hal semacam ini :)
Jan Hančič
Atau lebih baik lagi, gabungkan dua jawaban teratas ... body, * {font-family: Algerian;}
james ace
106 
*{font-family:Algerian;}

solusi yang lebih baik di bawah Menerapkan satu font ke seluruh situs web dengan CSS

Salam El-Banna
sumber
3
Yang cukup menarik, ini tidak berfungsi saat menggunakan reset CSS Eric Meyer
ianbeks
Bukankah itu menerapkan font family ke setiap elemen? Ini sepertinya akan menerapkannya ke elemen yang tidak perlu (seperti <img>) dan menjadi tidak efisien. Saya pasti bisa salah, tetapi saya telah membaca untuk berhati-hati dalam menerapkan gaya pada semuanya.
Max Strater
Karena aturan universal tidak dapat diganti, Anda tidak akan dapat menggunakan font kedua di situs Anda.
Julian F. Weinert
Karena noboy telah menyebutkan ini, pemilih universal diketahui lambat. lebih lanjut tentang itu di sini: clairecodes.com/blog/…
Terje Solem
Atau lebih baik lagi, gabungkan dua jawaban teratas ... body, * {font-family: Algerian;}
james ace
49

Selektor universal *mengacu pada semua elemen, css ini akan melakukannya untuk Anda:

*{
  font-family:Algerian;
}

Namun sayangnya jika Anda menggunakan ikon FontAwesome , atau Ikon apa pun yang membutuhkan font family mereka sendiri, ini hanya akan menghancurkan ikon dan mereka tidak akan menampilkan tampilan yang diperlukan.

Untuk menghindari hal ini, Anda dapat menggunakan :notselektor, contoh ikon fontawesome <i class="fa fa-bluetooth"></i>, jadi Anda bisa menggunakan:

*:not(i){
  font-family:Algerian;
}

ini akan menerapkan keluarga ini ke semua elemen dalam dokumen kecuali elemen dengan nama tag <i>, Anda juga dapat melakukannya untuk kelas:

*:not(.fa){
  font-family:Algerian;
}

ini akan menerapkan keluarga ini ke semua elemen dalam dokumen kecuali elemen dengan kelas "fa" yang merujuk ke kelas default fontawesome, Anda juga bisa menargetkan lebih dari satu kelas seperti ini:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}
Salam El-Banna
sumber
Jawaban ini memberikan detail yang sangat dibutuhkan sesuai dengan penggunaan gaya saat ini di halaman web karena penggunaan ikon dari bootstrap (glyphicons) dan font yang mengagumkan
Lakshman
harap dicatat bahwa: (bukan selector) adalah CSS3 yang tidak kompatibel dengan semua browser. IE 9+ kita harus menunggu setidaknya 10 tahun agar semua orang di seluruh dunia meninggalkan IE -9 keluarga selamanya: D: '(
Mahdi Jazini
19

Pastikan perangkat seluler tidak akan mengubah font dengan font default-nya dengan menggunakan important bersama dengan pemilih universal *:

* { font-family: Algerian !important;}
omong kosong
sumber
18 
* { font-family: Algerian; }

Pemilih universal *mengacu pada elemen apa pun.

Jukka K. Korpela
sumber
3

Karena fonta yang berbeda mungkin sudah ditentukan oleh browser untuk elemen formulir, berikut adalah 2 cara untuk menggunakan font ini di mana saja:

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

Masih akan ada font monospace pada elemen seperti pre / code, kbd, dll, tetapi, jika Anda menggunakan elemen ini, sebaiknya Anda menggunakan font monospace di sana.

Catatan penting: jika sangat sedikit orang yang menginstal font ini di OS mereka, maka font kedua dalam daftar akan digunakan. Di sini Anda tidak menentukan font kedua sehingga font serif default akan digunakan, dan itu adalah Times, Times New Roman kecuali mungkin di Linux.
Ada dua opsi: gunakan @ font-face jika font Anda bebas digunakan sebagai font yang dapat didownload atau tambahkan fallback: yang kedua, ketiga, dll. Dan terakhir family default (sans-serif, kursif (*), monospace atau serif). Daftar pertama yang ada di OS pengguna akan digunakan.

(*) kursif default pada Windows adalah Comic Sans. Kecuali jika Anda ingin menjebak pengguna Windows, jangan lakukan itu :) Font ini mengerikan kecuali untuk ulang tahun anak-anak Anda di mana font ini diterima.

FelipeAls
sumber
2

Harap letakkan ini di kepala Halaman Anda jika "body" membutuhkan penggunaan 1 dan font yang sama:

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

Semua yang ada di antara tag <body>dan </body>akan memiliki font yang sama

PICwebs
sumber
1

Oke jadi saya mengalami masalah ini di mana saya mencoba beberapa opsi berbeda.

Font yang saya gunakan adalah Ubuntu-LI, saya membuat folder font di direktori kerja saya. di bawah font folder

Saya bisa menerapkannya ... akhirnya inilah kode kerja saya

Saya ingin ini diterapkan ke seluruh situs web saya, jadi saya meletakkannya di bagian atas dokumen css. di atas semua tag Div (tidak penting, ketahuilah bahwa setiap font yang Anda tetapkan untuk posting skrip Anda akan diutamakan)

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

Jika saya kemudian ingin semua tag H1 saya menjadi sesuatu yang lain katakanlah sans sarif saya akan melakukan sesuatu seperti 

h1{
   font-family: Sans-sarif;
}

Dari kasus mana hanya tag H1 saya yang akan menjadi font sans-sarif dan sisa halaman saya adalah font Ubuntu-LI

Lee Alderman
sumber
0

di Bootstrap, inspektur web mengatakan bahwa Judul disetel ke 'mewarisi'

semua yang saya butuhkan untuk mengatur halaman saya ke font baru itu 

div, p {font-family: Algerian}

yang ada di .scss

austin
sumber
-1 
*{font-family:Algerian;}

html ini berhasil untuk saya. Ditambahkan ke pengaturan kanvas di wordpress.

Tampak keren - terima kasih!

intelijenjah
sumber