MENAMBAHKAN WEB GOOGLE FONT UNTUK BLOGSPOT
1. Periksa Direktori Font Web Google dan pilih font yang Anda suka.2. Anda dapat menambahkan font ke koleksi Anda atau cukup pilih satu untuk digunakan.
3. Kemudian Anda dapat memilih gaya font yang Anda inginkan.
4. Ini akan memberi Anda kode untuk mengintegrasikan font yang terlihat seperti ini
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>Kita perlu menutup kode untuk mencegah kesalahan. Untuk melakukan ini tambahkan tanda / ke akhir sebelum > sehingga kode terlihat seperti 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 kode yang diedit untuk menyematkan font.
6. Google Web Fonts juga akan memberi Anda CSS untuk font yang akan terlihat seperti ini
font-family: 'FONTNAME';Anda dapat menggunakan ini untuk setiap elemen di blog Anda. Ingat CSS ditulis seperti pemilih {property: value; }. Untuk menggunakan font sebagai judul tulisan Anda, cari </ b: skin> di HTML Anda. Tidak dapat 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 menggunakan 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 baru di Dropbox1. Pertama, pastikan Anda memiliki izin dan lisensi yang benar untuk menggunakan font. Biasanya Anda memang memerlukan lisensi komersial saat menggunakan font di blog jadi sebaiknya periksa ulang dengan pembuatnya. Biasanya Anda tidak dapat menggunakan font pada template yang Anda jual, tetapi sekali lagi penting untuk memeriksa dengan pembuatnya. Tempat yang bagus untuk menemukan font adalah DaFont, FontSquirrel, dan UrbanFonts. Unduh font yang Anda inginkan, biasanya dalam format OFT atau TTF. Terkadang mereka akan memberi Anda webfont, jika mereka melakukannya Anda dapat melewati langkah berikutnya.
2. Jika Anda tidak memiliki font web, Anda dapat mengonversi font menggunakan FontSquirrel WebFont Generator dan mengunduh kit. Buka zip jika perlu.
3. Buat akun pro di Dropbox. Unggah setiap font di sana ke folder, penting untuk tidak mengubah ini nanti. Jika Anda memiliki akun gratis lama yang memiliki folder publik, Anda dapat menggunakannya. Anda juga dapat menggunakan Google Drive tetapi lebih sulit untuk mendapatkan URL yang benar yang Anda butuhkan.
4. Klik pada setiap font > share link… > get link. Perhatikan URL dalam file teks. Berikut ini adalah tutorial singkat yang menunjukkan proses ini, telah sedikit berubah sejak direkam tetapi prosesnya sama.
5. Buka file .css yang Anda dapatkan dalam unduhan kit pada langkah 2. Anda perlu membuka file dalam editor teks seperti TextEdit, TextWrangler, SimpleText, TextPad atau bahkan NotePad. Anda akan melihat kode serupa di bawah ini. Edit URL sehingga mereka menautkan ke font di Dropbox Anda seperti yang ditampilkan.
@font-face {6. Di Blogger, cari ]]></b:skin>. Salin kode yang dimodifikasi dari file .css di folder webkit dan tempelkan di atas ]]></b:skin>.
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;
}
7. Anda sekarang dapat mengubah font elemen di blog Anda dengan menambahkan CSS di atas ]]></b:skin>. Untuk mengubah font judul tulisan gunakan yang berikut ini
h3.post-title {font-family: 'FONTNAME';}atau cari kode berikut di Tema > Edit HTML
or search for the following code in Template > Edit HTML
h3.post-title, .comments h5 {
h3.post-title, .comments h5 { font: 'NEW FONT', arial, other default fonts; }
TIDAK BEKERJA? MASALAH UMUM
Saya telah melihat dua 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 jika Anda mengalami masalah dan tidak ingin melakukannya sendiri.1. Pastikan Anda menggunakan URL yang benar dari Dropbox, Google Drive, hosting Anda sendiri, dll. Tautan tersebut akan membawa Anda ke file font.
2. Masalah lainnya adalah kode yang tidak lengkap sebelum kode font. Pergi ke Template> Edit HTML dan temukan ]]></b:skin>. Di atas ini, Anda akan melihat kode untuk mengubah font seperti itu
@font-face {Periksa di atas @font-face untuk memastikan kode sebelumnya ditutup. Dengan ditutup, maksud saya memiliki kurung akhir }. Kode CSS lengkap akan terlihat seperti ini
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>
previouscode { example: example; }
2 Komentar
font
BalasHapusInteresting post! This is really helpful for me. Thanks for sharing.
BalasHapusBuy custom logo design
Punya pertanyaan? Silahkan berkomentar..