Cara Membuat

Menciptakan pengalaman terbaik untuk berselancar di dunia internet bagi banyak perangkat tidaklah sesulit yang dibayangkan. Dalam kesempatan kali ini, kita akan mencoba menggunakan font family yang bisa tampil dengan baik di semua perangkat. Baik itu ponsel, smart phone, android, windows phone, iphone, laptop maupun pc. Ide dasarnya adalah mengembangkan pemikiran untuk mendukung kecepatan respons suatu halaman ketika dimuat dengan memanfaatkan font yang telah ada dalam setiap perangkat tersebut. Jika sebuah halaman menggunakan font family yang didukung oleh sistem dalam perangkat, tentu tidak perlu memuat font lainnya lagi. Dengan begitu kecepatan loading halaman bisa dipercepat yang berimbas pada performa pemuatan halaman. Bagi beberapa desainer web, ini bisa jadi masalah baru pastinya. Karena menggunakan font external, misalnya saja Google fonts, tentu sangat tidak direkomendasikan.

Mencari font family yang berfungsi baik di berbagai tipe perangkat ternyata cukup membingungkan. Ini karena semua perangkat telah mengembangkan font family bawaan yang berbeda antara satu dengan yang lainnya. Setiap perangkat memiliki ukuran layar yang sangat berbeda dan kemampuan yang berbeda pula. Jadi pastilah kita tidak bisa hanya menggunakan 1 type font family saja. Kalau kita menggunakan semua font default di masing-masing perangkat tersebut, tentu kita harus melakukan beberapa penyesuaian desain pada perangkat ponsel dan smart phone.

Dalam praktiknya, jika sebuah font telah dideklarasikan, dan perangkat pengguna memiliki font yang ada dalam daftar font family tersebut, maka sisa daftar font family harus diabaikan. Ini berarti jika beberapa font tersebut dinyatakan sebagai font yang dapat diunduh dengan secara langsung atau pun tidak langsung dengan menggunakan kode yang disediakan oleh Google, maka tidak boleh ada unduhan yang dilakukan. Tetapi jika ada karakter yang tidak ada dalam font itu, maka daftar harus diproses lebih lanjut dan ini akan menghasilkan unduhan font jika tidak ada font sebelumnya dalam daftar. Browser dapat menerapkan perilaku ini secara berbeda, misalnya mungkin selalu memuat font yang dapat diunduh, atau mungkin gagal mengunduhnya jika font dalam daftar sebelumnya ada dalam sistem.

Di bawah ini adalah beberapa font family yang mengacu pada font default dalam sistem, pada kebanyakan platform iOS, Windows, Windows Phone, Android dan Ubuntu yang bisa digunakan pada proyek selanjutnya. Tentunya jika pengembang tertarik untuk menggunakan font yang didukung oleh semua perangkat dan bisa tampil baik di multi-perangkat.

Daftar Font Family Default System

• -apple-system- San Francisco di Safari (di Mac OS X dan iOS); Neue Helvetica dan Lucida Grande pada versi Mac OS X.
• system-ui - Font UI default pada platform yang diberikan.
• BlinkMacSystemFont- setara dengan -apple-system, untuk Chrome di Mac OS X.
• "Segoe UI" - Windows (Vista +) dan Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) dan Chrome OS.
• Ubuntu - semua versi Ubuntu.

Pada panduan kali ini, font untuk OS lain atau versi yang lebih lama tidak dicantumkan.

Menggunakan Font-Family Default System

Untuk menggunakan font tersebut, silakan tambahkan baris property berikut pada pengaturan css proyek yang sedang dikerjakan.

font-family:system, -apple-system, system-ui, "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Lucida Grande", Roboto, Arial, Helvetica, sans-serif, Ubuntu;

Contohnya jika ingin menggunakan font tersebut pada suatu elemen, maka tambahkan saja property tersebut pada elemen yang ingin menggunakan font tersebut.

Cara Mengganti Font Template Dengan Font Family Default System

1. Buka blogger.com kemudian login.
2. Pada menu “Tema”, klik “Edit HTML”
3. Lalu salin CSS di bawah ini dan letakkan di atas tag </head>

<style type="text/css">
  body{
     font-family:system, -apple-system, system-ui, "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Lucida Grande", Roboto, Arial, Helvetica, sans-serif, Ubuntu;
     font-size:16px;
  }
</style>

4. Setelah itu simpan tema dan lihat hasilnya.

Template yang saya gunakan ini sudah menggunakan font-family default dari masing-masing system. Untuk melihat perbedaannya, silakan buka blog ini di beberapa perangkat yang berbeda. Jika tertarik menerapkan font-family default system ini di blog atau web Anda, silakan ikuti langkah-langkah cara mengganti font template blogspot dengan font-family default dari system di atas pada desain web atau blog yang Anda miliki.

Selamat mencoba!

Kesempatan kali ini http://mahirngoding.blogspot.com ingin berbagi tentang bagaimana cara membuat template Blogger/Blogspot yang responsif dengan menggunakan Bootstrap. Rencananya tema Blogspot yang dibuat ini akan menggunakan plugin CSS Bootstrap V3 untuk desain yang responsif dan juga memakai Font Awesome untuk mempercantik tampilan blog serta menggunakan Jquery untuk membuat tampilan blog agar lebih dinamis. Rancangan template blog tersebut secara garis besarnya akan seperti ini:

Dokumen HTML

Sebagai langkah awal, buka Notepad dan salin struktur dokumen HTML di bawah ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

<b:skin version='1.0.0'><![CDATA[

]]></b:skin>

<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--tag html-->

</body>
</html>

CSS Bootstrap V3

Kemudian salin syntax di bawah ini untuk memanggil fungsi CSS Bootstrap:

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

Letakkan code tersebut di atas code ini:

<b:skin version='1.0.0'><![CDATA[

Javascript Jquery

Kemudian tambahkan code untuk memanggil fungsi-fungsi Javascript Jquery, salin code di bawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

Lalu tempelkan code tersebut di atas code berikut ini:

<b:include data='blog' name='google-analytics'/>

Javascript Bootstrap

Jangan lupa tambahkan pula script Javascript bawaan dari Bootstrap. Salin code di bawah ini:

<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>

Letakkan code tersebut di bawah code berikut ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

Fonts Awesome

Selanjutnya tambahkan Fonts Awesome. Salin code di bawah ini:

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Letakkan code ini tepat di bawah code:

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

Hasil

Jadi secara keseluruhan nantinya struktur dokumen tersebut akan seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:skin version='1.0.0'><![CDATA[

]]></b:skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--tag html-->

</body>
</html>

Bersambung ke Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan