CSS Font Stack

#foo {

    /* 1. The Times New Roman-based serif stack */
    font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

    /* 2. A modern Georgia-based serif stack */
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

    /* 3. A more traditional Garamond-based serif stack */
    font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

    /* 4. The Helvetica/Arial-based sans serif stack */
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* 5. The Verdana-based sans serif stack */
    font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

    /* 6. The Trebuchet-based sans serif stack */
    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

    /* 7. The heavier `Impact` sans serif stack */
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

    /* 8. The monospace stack */
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

}

Sumber: Sitepoint - 8 Definitive Web Font Stacks Article

17 Komentar

  • Surga Kenari

    kurang paham saya :(

    • abang ichal

      mungkin maksudnya.. kumpulan font yg sekeluarga.. jadi ada kategori2nya yg huruf miring diatasnya.

    • Taufik Nurrohman

      Ini CSS fallback font yang disarankan karena kemiripan bentuknya. Jadi, misalnya untuk kategori Monospace. Kita sedang menampilkan font Consolas, maka jika komputer mendukung font Consolas, Consolas akan tampil. Tapi jika tidak, font yang akan ditampilkan adalah font yang ada setelahnya, begitu seterusnya sampai nama font terakhir: monospace.
      Fallback font akhir yang umum digunakan setahu Saya ada tiga: Serif, Sans-Serif dan Monospace.

  • Kang Kapuk

    'Droid Serif' gak ada ya Bang....
    Masuk keluarganya siapa nih..........

    • Taufik Nurrohman

      Droid Serif masuk ke Serif. Disarankan diletakkan pada barisan Times New Roman-based Serif Stack (menurut Saya):

      font-family: "Droid Serif", Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
  • Putra

    kalo font di blog saya apa yah? arial kan? sudah mendukungkah =D

    • Taufik Nurrohman

      Font-font yang mendukung tanpa harus menyisipkan @font-face setahu Saya:
      1. Arial
      2. Tahoma
      3. Verdana
      4. Sans Serif
      5. Serif
      6. Times
      7. Georgia
      8. Monospace
      9. Trebuchet MS
      10. Comic Sans MS
      11. Impact
      12. Century Gothic

      • Anonim

        kalo "Brush Script mt" masuknya ke mana yah?
        saya pakek di blog font tersebut tapi tanpa @font-face dan jalan/tampil.

  • Anonim

    kang kalo keluarganya ini apa kang font-family: 'Maven Pro',sans-serif;

    sama mau tanya kog font facenya cuma keliatan rapi pake mozilla itu pun kalo mozilla terbaru, kalo buat crome dan opera berantakan hasilnya

    • Taufik Nurrohman

      Pada bagian fallback tertulis sans-serif, jadi dia harusnya masuk ke Sans-Serif -- gambar tampilannya nggak ada @@,
      @font-face berbeda-beda hasilnya kalau dilihat di peramban yang berbeda. Yang terkenal adalah yang bisa menyesuaikan diri di semua jenis peramban.

  • Anonim

    kalo dari css ini ada penjelasan yang lebih bisa di pahami gak kang

    body { font-family: web-font, fallback-fonts; }
    strong { font-family: web-font-bold; }
    em { font-family: web-font-italic; }

    @font-face {
    font-family: 'web-font';
    src: url('web-font.eot?') format('eot'),
    url('web-font.woff') format('woff'),
    url('web-font.ttf') format('truetype'),
    url('web-font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'web-font-bold';
    src: url('web-font-italic.eot?') format('eot'),
    url('web-font-italic.woff') format('woff'),
    url('web-font-italic.ttf') format('truetype'),
    url('web-font-italic.svg') format('svg');
    font-weight: bold;
    font-style: normal;
    }
    @font-face {
    font-family: 'web-font-italic';
    src: url('web-font-bold.eot?') format('eot'),
    url('web-font-bold.woff') format('woff'),
    url('web-font-bold.ttf') format('truetype'),
    url('web-font-bold.svg') format('svg');
    font-weight: normal;
    font-style: italic;
    }

    • Taufik Nurrohman

      Seharusnya sih, @font-face dituliskan di bagian atas supaya termuat duluan. Gunanya untuk mengambil file font dari tempat font tersebut disimpan:

      @font-face {
      font-family:'web-font';
      src:url('URL-alamat-file-font-ganteng-disimpan.ttf') format('truetype');
      font-weight:normal;
      }

      Setelah itu terapkan CSS font di tempat yang dinginkan:

      div {
      font:normal normal 14px/1.4 "Web Font",Serif;
      }
  • Anonim

    kalau untuk font di postingan cocoknya yg mana aja kira2 mas?
    saya kurang mengerti tentang font. :D

  • Anonim

    gini contohnya :

    contoh itu dari dar mozilla dan google crome kenapa crome gak mampu mendeteksi font facenya, atau kurang mutahir kali ya

  • Unknown

    pengen dumel nih bang...

    ko abang pinter banget sih, dari tadi saya keliling ilmu disini kaga ada yang nyangkut :D . dimaklum yah bang, namanya juga blogger dadakan hahaha

  • Unknown

    kalau font yg ini termasuk apa ya gan "Gang of Three"

Komentar telah ditutup.