Cara Kerja, Metode dan Teknik Penggunaan WEB FONT

Sudah banyak sekali perubahan didunia web, salah satunya dalam cara penggunaan font untuk website.

Kita tidak akan membahas penggunaan font standar (system font) yang otomatis disertakan disetiap komputer, karena itu sangat terbatas jumlahnya dan tentunya kurang bervariasi dan sudah agak bosan juga.

Untungnya sekarang sudah ada teknologi baru yang tersedia, yang memungkinkan kita untuk menggunakan web font yang didesain dengan sangat cantik tanpa perlu membayar (free) dan tentunya ini legal.

Beberapa Jenis Teknik Penggunaan Web Font

1. Dengan berlangganan (subscribe) pada penyedia Web Font.

Contohnya seperti Typekit atau Font Deck

Prosedur: 

Buat Akun di website mereka 

Pilih font yang anda inginkan di library mereka. 

Web desainer tinggal export potongan kode (code snippet), dan implementasikan ke dalam website. 

Anda diharuskan membayar untuk berlangganan (subscribe) font tersebut pertahun. Kira-kira harganya sekitar 5 sampai dengan £10 pound per font per tahun nya. 

2. Mencari sendiri web font gratis (open license) di situs seperti Font Squirrel

Prosedur: 

Pilih font yang anda inginkan di library web tersebut 

Web designer tinggal export kode @fontface dan file font tersebut juga diletakan di folder kerja anda, lalu implementasikan pada website. 

Untuk tetap aman dalam masalah hukum maka Anda harus memastikan font yang anda gunakan memiliki lisensi terbuka (open license), yang memungkinkan font tersebut digunakan di website manapun yang anda miliki. Ini dapat ditemukan di situs seperti font squirrel yang 100% gratis untuk penggunaan secara komersial. Selamat!!. Anda diperbolehkan untuk men-download font tersebut, dan anda juga bisa menggunakan nya di photoshop, dan aplikasi lain.

3. Google Font – Free & Open Source

Prosedur: 

Pilih font yang anda suka dari library mereka (google) 

Web desainer tinggal copy paste kode yang tertera dan menerapkan di situs anda. 

Anda diperbolehkan untuk mendownload font tersebut, jadi anda bisa menggunakan font tersebut di photoshop terlebih dahulu jika anda mendesain web mulai dari photoshop.

Metode mana yang akan dipilih?

Keputusan biasaya bermuara pada penyedia mana yang memiliki font yang ingin anda gunakan, jadi intinya tentukan font mana yang ingin anda gunakan, dengan begitu anda tau harus menggunakan metode mana. Berbeda ketika anda memutuskan untuk mencari yang free lalu memilih font-font yang tersedia, jadi dengan begitu berarti pilihan anda lebih sempit. Karena terkadang font yang cocok untuk website anda adalah font yang berbayar. Jadi tentukan dulu Font yang ingin digunakan.

Meskipun @fontface (kode yang digunakan untuk menentukan font di css) sudah didukung oleh kebanyakan browser (asalkan semua format font yang diperlukan tersedia dan ditautkan dengan benar) kadang bagaimana browser me-render font tersebut menjadi sedikit kurang baik, terutama di browser jadul. Terkadang ada font yang ketika ditentukan ukuran size nya menjadi tidak sama hasilnya di beberapa browser, ini biasanya bisa karena proses pembuatan font yang kuran baik, atau kurang nya dots-dots pada font tersebut yang membuat hasil nya jadi kurang oke.

Jadi saran kami selalu uji font yang terlebih dahulu font yang ingin anda gunakan, jangan hanya sekedar melihat display yang menarik lantas anda membeli atau langsung menggunakan pada website anda.

Semoga tulisan ini bisa berguna dan memberi gambaran kepada anda bagaimana menggunakan web font untuk website anda.

Sampai jumpa pada tulisan selanjutnya, salam web design indonesia.

Read More

Colorful CSS3 Animated Navigation Menu

In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font. An icon font is, as the name implies, a font which maps characters to icons instead of letters. This means that you get pretty vector icons in every browser which supports HTML5 custom fonts (which is practically all of them). To add icons to elements, you only need to assign a class name and the icon will be added with a :before element by the font awesome stylesheet.

Here is the markup we will be working with:

• 
  
  
  
  • Dropdown item 1
  
  
  • Dropdown item 2

Each item of the main menu is a child of the topmost unordered list. Inside it is a link with an icon class (see a complete list of the icon classes here), and another unordered list, which will be displayed as a drop down on hover.
CSS3 Animated Dropdown Menu

As you see in the HTML fragment above, we have unordered lists nested in the main ul, so we have to write our CSS with caution. We don’t want the styling of the top UL to cascade into the descendants. Luckily, this is precisely what the css child selector ‘>‘ is for:
#colorNav > ul{width: 450px;margin:0 auto;}
This limits the width and margin declarations to only the first unordered list, which is a direct descendant of our #colorNav item. Keeping this in mind, let’s see what he actual menu items look like:
#colorNav > ul > li{ /* will style only the top level li */list-style: none;box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;display: inline-block;line-height: 1;margin: 1px;border-radius: 3px;position:relative;}
We are setting a inline-block display value so that the list items are shown in one line, and we are assigning a relative position so that we can offset the dropdowns correctly. The anchor elements contain the actual icons as defined by Font Awesome.
#colorNav > ul > li > a{color:inherit;text-decoration:none !important;font-size:24px;padding: 25px;}
Now we can move on with the drop downs. Here we will be defining a CSS3 transition animation. We will be setting a maximum-height of 0 px, which will hide the dropdown. On hover, we will animate the maximum height to a larger value, which will cause the list to be gradually revealed:
#colorNav li ul{position:absolute;list-style:none;text-align:center;width:180px;left:50%;margin-left:-90px;top:70px;font:bold 12px 'Open Sans Condensed', sans-serif;/* This is important for the show/hide CSS animation */max-height:0px;overflow:hidden;-webkit-transition:max-height 0.4s linear;-moz-transition:max-height 0.4s linear;transition:max-height 0.4s linear;}
And this is the animation trigger:
#colorNav li:hover ul{max-height:200px;}
The 200px value is arbitrary and you will have to increase it if your drop down list contains a lot of values which do not fit. Unfortunately there is no css-only way to detect the height, so we have to hard code it.

The next step is to style the actual drop-down items:
#colorNav li ul li{background-color:#313131;}#colorNav li ul li a{padding:12px;color:#fff !important;text-decoration:none !important;display:block;}#colorNav li ul li:nth-child(odd){ /* zebra stripes */background-color:#363636;}#colorNav li ul li:hover{background-color:#444;}#colorNav li ul li:first-child{border-radius:3px 3px 0 0;margin-top:25px;position:relative;}#colorNav li ul li:first-child:before{ /* the pointer tip */content:'';position:absolute;width:1px;height:1px;border:5px solid transparent;border-bottom-color:#313131;left:50%;top:-10px;margin-left:-5px;}#colorNav li ul li:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;}
And of course, we are going nowhere without some fancy colors! Here are 5 versions:
#colorNav li.green{/* This is the color of the menu item */background-color:#00c08b;/* This is the color of the icon */color:#127a5d;}#colorNav li.red{background-color:#ea5080;color:#aa2a52;}#colorNav li.blue{background-color:#53bfe2;color:#2884a2;}#colorNav li.yellow{background-color:#f8c54d;color:#ab8426;}#colorNav li.purple{background-color:#df6dc2;color:#9f3c85;}
One neat aspect of using icon fonts, is that you can change the color of the icon by simply declaring a color property. This means that all customizations you might want to make can be done with CSS alone
.
Icon fonts are a great addition to one’s web development toolset. As they are regular fonts, you can use the font-size
, color and text-shadow properties to customize them. This example doesn’t use images nor JS, so it should be fairly easy to match it with your current design and use it within a few minutes.

Read More