Cara Menambahkan Font Google / Jenis Abjad Khusus Ke Blogspot

Blogger.com-Posting hari ini akan membahas penambahan font kustom ke blog Anda di WordPress dan Blogger memakai Direktori Font atau Font Web Google. Blogger telah meningkatkan koleksi font yang tersedia di Perancang Template, tetapi pilihannya masih terbatas. Salah satu cara terbaik dan termudah untuk menambahkan font khusus ke blog Anda yakni memakai Google Web Fonts dengan lebih dari 600 untuk menentukan dari Anda niscaya menemukan satu yang Anda sukai. Jika Anda tidak ingin memakai Google Web Fonts, saya mempunyai metode kedua di bawah ini yang menawarkan cara menambahkan font ke Blogger.

Posting hari ini akan membahas penambahan font kustom ke blog Anda di WordPress dan Blogge CARA MENAMBAHKAN FONT GOOGLE / JENIS HURUF KHUSUS KE BLOGSPOT

MENAMBAHKAN WEB GOOGLE FONT UNTUK BLOGSPOT

1. Periksa Direktori Font Web Google dan pilih font yang Anda suka.
2. Anda sanggup menambahkan font ke koleksi Anda atau cukup pilih satu untuk digunakan.
3. Kemudian Anda sanggup menentukan gaya font yang Anda inginkan.
4. Ini akan memberi Anda arahan untuk mengintegrasikan font yang terlihat menyerupai ini

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>

Kita perlu menutup arahan untuk mencegah kesalahan. Untuk melaksanakan ini tambahkan tanda / ke final sebelum > sehingga arahan terlihat menyerupai ini

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'/>

5. Sekarang masuk ke akun Blogger Anda. Buka Template> Edit HTML. Temukan <head> dan di bawahnya tempelkan arahan yang diedit untuk menyematkan font.

6. Google Web Fonts juga akan memberi Anda CSS untuk font yang akan terlihat menyerupai ini

font-family: 'FONTNAME';

Anda sanggup memakai ini untuk setiap elemen di blog Anda. Ingat CSS ditulis menyerupai pemilih {property: value; }. Untuk memakai font sebagai judul goresan pena Anda, cari </ b: skin> di HTML Anda. Tidak sanggup menemukannya? Lihat posting ini. Di atas </ b: skin> tempel berikut ini dan ubah nilainya untuk font Anda. Gunakan metode yang sama untuk mengubah font elemen lain dengan memakai pemilih yang benar.

h3.post-title {font-family: 'FONTNAME';}

MENAMBAHKAN CUSTOM / PIHAK KETIGA SAAT TIDAK MENDAPATKAN BLOGGER YANG TIDAK ADA FONT GOOGLE WEB

UPDATED FEB 2015 untuk mencerminkan perubahan gres di Dropbox

1. Pertama, pastikan Anda mempunyai izin dan lisensi yang benar untuk memakai font. Biasanya Anda memang memerlukan lisensi komersial dikala memakai font di blog jadi sebaiknya periksa ulang dengan pembuatnya. Biasanya Anda tidak sanggup memakai font pada template yang Anda jual, tetapi sekali lagi penting untuk mengusut dengan pembuatnya. Tempat yang elok untuk menemukan font yakni DaFont, FontSquirrel, dan UrbanFonts. Unduh font yang Anda inginkan, biasanya dalam format OFT atau TTF. Terkadang mereka akan memberi Anda webfont, kalau mereka melakukannya Anda sanggup melewati langkah berikutnya.

2. Jika Anda tidak mempunyai font web, Anda sanggup mengonversi font memakai FontSquirrel WebFont Generator dan mengunduh kit. Buka zip kalau perlu.

Baca Juga

3. Buat akun pro di Dropbox. Unggah setiap font di sana ke folder, penting untuk tidak mengubah ini nanti. Jika Anda mempunyai akun gratis usang yang mempunyai folder publik, Anda sanggup menggunakannya. Anda juga sanggup menggunakan Google Drive tetapi lebih sulit untuk mendapat URL yang benar yang Anda butuhkan.

4. Klik pada setiap font > share link… > get link. Perhatikan URL dalam file teks. Berikut ini yakni tutorial singkat yang menawarkan proses ini, telah sedikit berubah semenjak direkam tetapi prosesnya sama.

5. Buka file .css yang Anda dapatkan dalam unduhan kit pada langkah 2. Anda perlu membuka file dalam editor teks menyerupai TextEdit, TextWrangler, SimpleText, TextPad atau bahkan NotePad. Anda akan melihat arahan serupa di bawah ini. Edit URL sehingga mereka menautkan ke font di Dropbox Anda menyerupai yang ditampilkan.

@font-face {
font-family: 'FONTNAME';
src: url('THE-URL-TO-YOUR-FONT/FONTNAME.eot');
src: url('THE-URL-TO-YOUR-FONT/FONTNAME.eot?#iefix') format('embedded-opentype'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.woff') format('woff'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.ttf') format('truetype'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.svg#FONTNAMEregular') format('svg');
font-weight: normal;
font-style: normal;
}

6. Di Blogger, cari ]]></b:skin>. Salin arahan yang dimodifikasi dari file .css di folder webkit dan tempelkan di atas ]]></b:skin>.

7. Anda kini sanggup mengubah font elemen di blog Anda dengan menambahkan CSS di atas ]]></b:skin>. Untuk mengubah font judul goresan pena gunakan yang berikut ini

h3.post-title {font-family: 'FONTNAME';}
or search for the following code in Template > Edit HTML
h3.post-title, .comments h5 {

atau cari arahan berikut di Tema > Edit HTML

h3.post-title, .comments h5 { font: 'NEW FONT', arial, other default fonts; }

TIDAK BEKERJA? MASALAH UMUM

Saya telah melihat dua duduk masalah umum dari komentar dan email yang saya terima terkait pos ini. Silakan periksa ini dengan hati-hati. Saya menyediakan layanan tweaker di sini untuk menambahkan font kalau Anda mengalami duduk masalah dan tidak ingin melakukannya sendiri.

1. Pastikan Anda memakai URL yang benar dari Dropbox, Google Drive, hosting Anda sendiri, dll. Tautan tersebut akan membawa Anda ke file font.

2. Masalah lainnya yakni arahan yang tidak lengkap sebelum arahan font. Pergi ke Template> Edit HTML dan temukan ]]></b:skin>. Di atas ini, Anda akan melihat arahan untuk mengubah font menyerupai itu

@font-face {
font-family: 'FONTNAME';
src: url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.eot');
src: url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.eot?#iefix') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.ttf') format('truetype'),
url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.svg#FONTNAMEregular') format('svg');
font-weight: normal;
font-style: normal;
}
h3.post-title {font-family: 'FONTNAME';}
]]></b:skin>

Periksa di atas @font-face untuk memastikan arahan sebelumnya ditutup. Dengan ditutup, maksud saya mempunyai kurung final }. Kode CSS lengkap akan terlihat menyerupai ini