• Home
  • About
  • Sitemap
  • Gallery
  • Follow
Blog ARS

Blog ARS

Blog ARS ~ Berbagi Apa Saja

Home » Tipografi » Tutorial » Daftar Lengkap Efek Tulisan dari Google Fonts

1/10/14

Daftar Lengkap Efek Tulisan dari Google Fonts

Daftar Lengkap Efek Tulisan dari Google Fonts, Font Effects Complete List from Google Fonts

Daftar Lengkap Efek Tulisan dari Google Fonts. Tutorial ini penting/tidak penting sehingga terlihat membosankan. Ya tutorial ini merupakan kelanjutan dari postingan sebelumnya.

Baca di: Menggabungkan Beberapa Font Google ke dalam Satu Tautan

Misal penambahan Nama API (efek) ke dalam url.

<link href='http://fonts.googleapis.com/css?family=Open+Sans&effect=shadow-multiple' rel='stylesheet' type='text/css'/>

Jika ingin menambahkan efek tulisan lagi, lakukanlah penambahan Nama API (efek) dengan tanda pemisah |.

Penggunaan

Penggunaannya dengan menambahkan class='Nama Class'. Contoh.

<p class='font-effect-shadow-multiple'>Efek Shadow Multiple</p>

Untuk melihat lebih lengkapnya, baca di bawah ini.

Daftar Lengkap Efek Tulisan dari Google Fonts

Contoh Efek Nama API Nama Class Mendukung
Anaglyph anaglyph font-effect-anaglyph Chrome, Safari, Firefox, Opera
Brick Sign brick-sign font-effect-brick-sign Chrome, Safari
Canvas Print canvas-print font-effect-canvas-print Chrome, Safari
Crackle crackle font-effect-crackle Chrome, Safari
Decaying decaying font-effect-decaying Chrome, Safari
Destruction destruction font-effect-destruction Chrome, Safari
Distressed distressed font-effect-distressed Chrome, Safari
Distressed Wood distressed-wood font-effect-distressed-wood Chrome, Safari
Emboss emboss font-effect-emboss Chrome, Safari, Firefox, Opera
Fire fire font-effect-fire Chrome, Safari, Firefox, Opera
Fire Animation fire-animation font-effect-fire-animation Chrome, Safari, Firefox, Opera
Fragile fragile font-effect-fragile Chrome, Safari
Grass grass font-effect-grass Chrome, Safari
Ice ice font-effect-ice Chrome, Safari
Mitosis mitosis font-effect-mitosis Chrome, Safari
Neon neon font-effect-neon Chrome, Safari, Firefox, Opera
Outline outline font-effect-outline Chrome, Safari, Firefox, Opera
Putting Green putting-green font-effect-putting-green Chrome, Safari
Scuffed Steel scuffed-steel font-effect-scuffed-steel Chrome, Safari
Shadow Multiple shadow-multiple font-effect-shadow-multiple Chrome, Safari, Firefox, Opera
Splintered splintered font-effect-splintered Chrome, Safari
Static static font-effect-static Chrome, Safari
Stonewash stonewash font-effect-stonewash Chrome, Safari
Three Dimensional 3d font-effect-3d Chrome, Safari, Firefox, Opera
Three Dimensional Float 3d-float font-effect-3d-float Chrome, Safari, Firefox, Opera
Vintage vintage font-effect-vintage Chrome, Safari
Wallpaper wallpaper font-effect-wallpaper Chrome, Safari

Semoga bermanfaat.

Sudah ada 87 komentar nya orang cakep

  1. AnonymousJanuary 10, 2014 at 5:45 PM

    Pertamax di amankan gan. Wow keren-keren ya fontsnya.

    ReplyDelete
    Replies
    1. UnknownJanuary 12, 2014 at 12:20 AM

      numapng pertamax mas...

      Delete
      Replies
        Reply
    2. Intan SudibjoJanuary 12, 2014 at 11:33 AM

      saya numpang premium saja :)

      Delete
      Replies
        Reply
    3. abang ichalJanuary 12, 2014 at 5:15 PM

      antri yg rapi

      Delete
      Replies
        Reply
    4. Fahri SamudraMarch 12, 2014 at 8:17 AM

      keempax

      Delete
      Replies
        Reply
      5. Reply
  2. UnknownJanuary 10, 2014 at 7:14 PM

    yang shadow multiple keren buanget dech .. :) neon juga mksih mas infonya simpen dulu ahh..

    ReplyDelete
    Replies
    1. abang ichalJanuary 11, 2014 at 7:07 PM

      oke makasih

      Delete
      Replies
        Reply
      2. Reply
  3. Intan SudibjoJanuary 10, 2014 at 8:04 PM

    kalo saya sih yang standar standar aja sih hhhehehe

    ReplyDelete
    Replies
      Reply
  4. DATA AKUN GELAP PEMUDA PANCASILA MENTAWAIJanuary 10, 2014 at 8:21 PM

    tak sedot gan infonya
    keren pokonya

    ReplyDelete
    Replies
      Reply
  5. UnknownJanuary 10, 2014 at 8:24 PM

    Mantap efek font nya mas...
    cocok nggak nih ya buat blog saya

    ReplyDelete
    Replies
    1. abang ichalJanuary 11, 2014 at 7:08 PM

      ga tau deh

      Delete
      Replies
        Reply
      2. Reply
  6. FikriJanuary 10, 2014 at 9:29 PM

    Wah mantep thx infonya gan :D

    ReplyDelete
    Replies
      Reply
  7. PrimeJanuary 10, 2014 at 10:37 PM

    mantap, sebagian ada yang belum tau, :D

    ReplyDelete
    Replies
      Reply
  8. UnknownJanuary 11, 2014 at 7:56 AM

    wah lengkap sekali ternyata koleksi oom google

    ReplyDelete
    Replies
      Reply
  9. Mr.RandyJanuary 11, 2014 at 9:52 AM

    oooh mantap ya jadi sekarang gak usah lagi gunain text-shadow ya?

    ReplyDelete
    Replies
    1. abang ichalJanuary 11, 2014 at 7:14 PM

      iya ga usah cape" lagi bikin text-shadow. mungkin ini kalo ada keperluan untuk bikin post unik nya.

      Delete
      Replies
        Reply
    2. Mr.RandyMarch 8, 2014 at 1:28 PM

      bagus sihh, tapi gak bebas nentukan seberapa level efeknya misal efek api itu, atau efek 3d nya :) dan lagian kayaknya lebih berat hehe but nice lah, btw ngapa gak apdet lagi?

      Delete
      Replies
        Reply
    3. Fahri SamudraMarch 12, 2014 at 8:31 AM

      Bener gan, kenapa gk update lagi nih bos??

      Delete
      Replies
        Reply
    4. abang ichalMarch 12, 2014 at 6:44 PM

      lagi menghadapi ujian

      Delete
      Replies
        Reply
      5. Reply
  10. CrecesterJanuary 11, 2014 at 2:52 PM

    wah mantap sekali mas, sip bener

    ReplyDelete
    Replies
      Reply
  11. Muhammad Adam Hussein, S.PdJanuary 11, 2014 at 6:05 PM

    Wah asik nih, cukup lengkap jenisnya, ^.^

    ReplyDelete
    Replies
      Reply
  12. Sopala MultapaJanuary 11, 2014 at 6:07 PM

    wah patut saya coba nih sob hehe
    ternyata efect nya dahsyat

    ReplyDelete
    Replies
    1. abang ichalJanuary 11, 2014 at 7:19 PM

      boleh juga ntuh sob

      Delete
      Replies
        Reply
      2. Reply
  13. Elfrida ChaniaJanuary 11, 2014 at 10:52 PM

    Fontnya keren :)

    ReplyDelete
    Replies
      Reply
  14. UnknownJanuary 12, 2014 at 12:21 AM

    simpen dulu sp th suatu saat di pakai, biar blognya keren...
    kunjungan mlm mas...

    ReplyDelete
    Replies
      Reply
  15. MasnadyJanuary 12, 2014 at 12:22 AM

    loh font juga ada yang sudah ada afek animasinya to mas...? saya baru tau nih mas.. apa memang mas rizal yang menambahkan efek animasinya...?

    ReplyDelete
    Replies
    1. abang ichalJanuary 12, 2014 at 10:12 AM

      itu sdh memang dari google mas, sy tdk menambahkannya

      Delete
      Replies
        Reply
      2. Reply
  16. Noval BintangJanuary 12, 2014 at 9:13 AM

    makasih mas sharenya, ane baru tau soalnya kalau ada effect font hehe

    ReplyDelete
    Replies
    1. abang ichalJanuary 12, 2014 at 10:13 AM

      oke sama sama... silahkan dilihat" punya gugel

      Delete
      Replies
        Reply
      2. Reply
  17. UnknownJanuary 12, 2014 at 11:19 AM

    hahay.... ni yang di cari sob.... akhirnya google yang nyediakan juga.... -_-


    #maksih_sob

    ReplyDelete
    Replies
    1. abang ichalJanuary 12, 2014 at 5:19 PM

      boleh dipake untuk pos uniknya sob.

      Delete
      Replies
        Reply
    2. UnknownJanuary 14, 2014 at 1:32 PM

      heheh iaya sob.. tapi mau buat post unik harus perlu tahap lagi sob... :D

      Delete
      Replies
        Reply
    3. abang ichalJanuary 14, 2014 at 4:41 PM

      hehe tahap yg mana sob.

      Delete
      Replies
        Reply
    4. AnonymousJanuary 16, 2014 at 7:04 PM

      Sebenarnya itu hanya manipulasi CSS doang, lebih baik buka link font efek tersebut di browser terus copykan kode CSSnya langsung ke blog. Daripada menggunakan kode <link>, alasannya yaitu jika menggunakan <link> browser akan meload kode 2x, pertama kode CSSnya sendiri, yang kedua adalah meload fontnya. Kalau kita test di GTMetrix, di situ akan terdapat kriteria http request, jika kita menggunakan <link> http request akan bertambah sehingga score blog di gtmetrix berkurang.

      Singkatnya jika kita membuka link ini:
      http://fonts.googleapis.com/css?family=Open+Sans&effect=shadow-multiple

      Kita akan mendapati kode berikut:
      @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
      }
      .font-effect-shadow-multiple {
      text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;
      -webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;
      }

      Lah itulah yang saya maksud, copykan langsung kode tersebut... :)

      Begitu juga jika kita tidak menggunakan efek tulisan dari Google/hanya menggunakan fontnya saja, buka link fontnya lalu copykan kodenya.

      Delete
      Replies
        Reply
    5. abang ichalJanuary 17, 2014 at 3:53 PM

      aduh jadi takut... sbnrnya sy mau bikin yg begituan, ntar kalo kebanyakan kode, orang orang jadi pada bingung... oke thenks bang jev

      Delete
      Replies
        Reply
    6. UnknownJanuary 18, 2014 at 10:55 PM

      wah mang bener simple banget ya.. makasih sobat @jefry...

      Delete
      Replies
        Reply
    7. binkbenkJanuary 28, 2014 at 2:55 PM

      itu sih bukan solusi tepat.. kita memakai yang standart saja...
      karena dari pengalaman saya pernah menggunakan seperti apa kata JENIV,, namun ternyata alamat : src lokal () open() url(nnnnnnn) itu ganti.... sempak kebingungan kenapa Font gak work...

      Delete
      Replies
        Reply
    8. abang ichalJanuary 30, 2014 at 7:54 PM

      keknya saya juga pernah alamin begitu

      Delete
      Replies
        Reply
      9. Reply
  18. Pantun CintaJanuary 12, 2014 at 12:12 PM

    Warna front neon aku suka
    Warna indah menggoda

    ReplyDelete
    Replies
      Reply
  19. Nurul ImamJanuary 12, 2014 at 12:37 PM

    Keren2 shadownya ;)

    ReplyDelete
    Replies
      Reply
  20. UnknownJanuary 12, 2014 at 2:40 PM

    Lengkap banget fontnya :D

    ReplyDelete
    Replies
      Reply
  21. AnonymousJanuary 12, 2014 at 3:10 PM

    Saya kira tutor ini bawaan dari browsernya mas, jadi saya lumayan agak bingung dalam menerapkan semua nya.
    Tutor yang sangat menarik

    ReplyDelete
    Replies
    1. abang ichalJanuary 12, 2014 at 5:21 PM

      hehe ini punya google. tidak perlu menerapkan semuanya. cukup seperlunya saja.

      Delete
      Replies
        Reply
      2. Reply
  22. AnonymousJanuary 13, 2014 at 1:03 PM

    Efek fontnya keren-keren banget gan. Terima kasih sudah share

    ReplyDelete
    Replies
      Reply
  23. Putra KefaJanuary 13, 2014 at 2:21 PM

    kunjungan perdana gan :) ADMIN, blognya sudah saya follow dan Google+,,jika berkenan di follow balik blogku yah disini

    http://anaktimor-17.blogspot.com/

    ReplyDelete
    Replies
      Reply
  24. UnknownJanuary 13, 2014 at 11:20 PM

    mantab :D banyak sekali pilihannya

    ReplyDelete
    Replies
      Reply
  25. UnknownJanuary 14, 2014 at 4:27 AM

    keren2 sob.. yg paling saya suka itu bentuk tulisan kapur.. :D

    ReplyDelete
    Replies
      Reply
  26. AdminJanuary 14, 2014 at 5:10 AM

    lengkap tuh kayaknya, tapi saya lebih memilih PT san Narrow seperti yang digunakan di blog saya :)

    ReplyDelete
    Replies
    1. abang ichalJanuary 14, 2014 at 5:58 AM

      oke nanti tinggal diganti atau ditambah saja nama font nya ke url nya

      Delete
      Replies
        Reply
      2. Reply
  27. binkbenkJanuary 14, 2014 at 12:35 PM

    Udah males mblogazine ya????
    Sekarang updatenya kok tutorial terus...

    Mantep dah :-bd

    ReplyDelete
    Replies
    1. abang ichalJanuary 14, 2014 at 4:45 PM

      hehe
      bukan nya malas, ya pas dapat tutorial blog ya saya share aja. kalo
      buat post nya jadi unique ya sy bisa saja, hanya ini sy onlinenya di
      warnet. leptopku lagi rusak. ingat waktu juga.

      Delete
      Replies
        Reply
    2. binkbenkJanuary 16, 2014 at 12:01 AM

      Pantes jarang BW sob...
      Semoga dapet laptop baru lagi :D

      Delete
      Replies
        Reply
    3. abang ichalJanuary 16, 2014 at 8:54 AM

      sy masih tunggu yg kualitas bagus di kotaku.

      Delete
      Replies
        Reply
      4. Reply
  28. UnknownJanuary 14, 2014 at 4:34 PM

    dari developer google ya ?
    ane juga udah ngegunaiin sebulan yang lalu :v
    buat blogazine lebih afdol

    ReplyDelete
    Replies
    1. abang ichalJanuary 14, 2014 at 4:55 PM

      buat post unique nya ntar aja. sy blm ada waktu nh.

      Delete
      Replies
        Reply
    2. UnknownJanuary 16, 2014 at 6:13 PM

      hoho :v ......... laptopnya kenapa rusak bro ?

      Delete
      Replies
        Reply
    3. abang ichalJanuary 16, 2014 at 6:25 PM

      sy sok"an benerin leptop sendiri, eh malah tambah rusak parah. sebelum nya sy sdh melalukannya dan berhasil.

      Delete
      Replies
        Reply
    4. UnknownJanuary 31, 2014 at 6:13 PM

      kalo saya saranin mending kalo 1x nyoba udah berhasil ya sudah , kalo dicoba lagi nanti akan ada efeknya , bisa itu dari hardwarenya , ramnya atau kerusakan yang bisa membuat laptop jadi fatal

      Delete
      Replies
        Reply
    5. abang ichalMarch 10, 2014 at 6:28 PM

      iya nih... kali ke2 udah kena. okemi

      Delete
      Replies
        Reply
      6. Reply
  29. DwiJanuary 14, 2014 at 5:05 PM

    wow mantap mantap :) dijadikan judul postingan mantaf nih :)

    ReplyDelete
    Replies
      Reply
  30. Stiker JalingkutJanuary 14, 2014 at 5:45 PM

    keren bang. komplit kya jamu komplit heheh

    ReplyDelete
    Replies
      Reply
  31. UnknownJanuary 15, 2014 at 11:52 AM

    masih bingung :D
    itu dimasukin ke posting atau template :| .

    ReplyDelete
    Replies
    1. abang ichalJanuary 16, 2014 at 6:26 PM

      di edit html template

      Delete
      Replies
        Reply
      2. Reply
  32. AnonymousJanuary 15, 2014 at 5:44 PM

    Kunjungan rutin sob, maklum pengunjung setia. Btw masih bingung nih sob

    ReplyDelete
    Replies
      Reply
  33. Ana SriwahyuniJanuary 17, 2014 at 10:02 AM

    wah lebih simpel kalau seperti ini mas, langsung jadi... minta ya.. :D

    ReplyDelete
    Replies
      Reply
  34. Sopala MultapaJanuary 18, 2014 at 6:43 AM

    kunjungan pagi nih sob .. lama saya tidak mampir

    ReplyDelete
    Replies
      Reply
  35. AnonymousJanuary 19, 2014 at 11:42 AM

    mantapp banget mass
    follback ya tunggu

    ReplyDelete
    Replies
      Reply
  36. PerumJogja.infoJanuary 20, 2014 at 10:28 PM

    wahhh untuk jenis font-fontnya menarik bgt, ada banyak pilihan yg bisa di gunakan, kapan-kapan mau mencoba ah..

    ReplyDelete
    Replies
      Reply
  37. MANG YONOJanuary 21, 2014 at 6:27 PM

    keren keren ya mas daftar efek tulisannya ...

    ReplyDelete
    Replies
      Reply
  38. Gone AsiaJanuary 27, 2014 at 4:21 PM

    Kunjungan kembali, keren2 koleksinya

    ReplyDelete
    Replies
      Reply
  39. GupitanJanuary 29, 2014 at 9:35 AM

    Efeknya keren-keren ternyata penambahan scriptnya sangat simple :)

    ReplyDelete
    Replies
      Reply
  40. AnonymousJanuary 30, 2014 at 11:34 PM

    Mantap tutorial Kang

    ReplyDelete
    Replies
      Reply
  41. Rz BotFebruary 1, 2014 at 3:54 AM

    keren2. apalagi yangadaapinya =D

    ReplyDelete
    Replies
      Reply
  42. UnknownFebruary 4, 2014 at 8:43 AM

    wah keren kak, blognya rapih selalu mengutamakan UX kali nih :)

    ReplyDelete
    Replies
      Reply
  43. SunandarFebruary 6, 2014 at 8:25 PM

    wah keren nih gan :D boleh dicoba :p

    mampir ya http://nandarious.com

    ReplyDelete
    Replies
      Reply
  44. SunandarFebruary 6, 2014 at 8:25 PM

    wah keren nih gan :D boleh dicoba :p

    mampir ya http://nandarious.com

    ReplyDelete
    Replies
      Reply
  45. Rohis FacebookFebruary 10, 2014 at 10:24 PM

    yg sangat mencolok itu fire-animation, yg lainx terlihat biasa2 aja, thx ya tutorialx *smile

    ReplyDelete
    Replies
      Reply
  46. UnknownFebruary 10, 2014 at 11:01 PM

    wah bagus juga nih. terima kasih mas tutorialnya..

    ReplyDelete
    Replies
      Reply
  47. Elfrida ChaniaFebruary 18, 2014 at 6:01 PM

    Wah, infonya bermanfaat nih, apalagi bagi yang lagi ngedit template hehe :D

    ReplyDelete
    Replies
      Reply
  48. Kang RianFebruary 24, 2014 at 10:11 PM

    Wkwkwk.. baru tau gw sob, ternyata gugel suka debus juga yah seneng nya main API @@,

    ReplyDelete
    Replies
      Reply
  49. febrianto putraFebruary 27, 2014 at 3:26 PM

    Keren banget :)

    ReplyDelete
    Replies
      Reply
  50. Dafin defandakyMarch 1, 2014 at 8:02 AM

    nyimak dulu sob kunjungan pagi

    ReplyDelete
    Replies
      Reply
  51. Yahya DoankMarch 10, 2014 at 10:48 PM

    Nyimak aja sob

    ReplyDelete
    Replies
      Reply
  52. Fahri SamudraMarch 12, 2014 at 6:52 AM

    wih, asyik nih dikasih daftar lengkapnya di sni, tengkyu gan.. Hehehe

    ReplyDelete
    Replies
    1. abang ichalMarch 12, 2014 at 6:37 PM

      oke sama sama

      Delete
      Replies
        Reply
      2. Reply
  53. Dafin defandakyMarch 15, 2014 at 1:53 AM

    keren sob, nice post

    ReplyDelete
    Replies
      Reply
  54. Rohmad Nur HidayatDecember 8, 2016 at 3:34 PM

    Baru tahu, bisa dibookmark dulu nih

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Anda tidak diperkenankan untuk menaruh link hidup di dalam komentar.
Emoticon: :) :( =( :D ^_^ =D ;) @@, :p \o/ :-bd :-d

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Label

Blogazine Blogger Bola Cerita Event Islam Kuliner Misteri News Opini Personal Poster Quote Sample Sejarah Tekno Template Tipografi Tokoh Tutorial Unique Wisata

Daftar

  • DTE :]
  • I AM ZTO
  • Yang Penting Share

Entri Populer

  • Cara Gue Membuat Postingan dengan Tampilan Berbeda
  • Menggabungkan Beberapa Font Google ke dalam Satu Tautan
  • Animasi Truck
  • Typography

Halaman

  • About
  • Contact
  • Sitemap
  • Privacy Policy
  • Disclaimer
Copyright 2012-2019 Blog ARS - All Rights Reserved
Powered by Blogger