Replace or Add New Fonts

Guide to add new fonts or replace them on all themes

Panduan ini hanya berlaku untuk menambahkan font dari Google Fonts, selalin lebih mudah dan gratis, font family yang disediakan juga banyak. Sebagai informasi tema ini juga menggunakan Google Fonts.

Instal Font di Blog

Mendapatkan Kode Embed

Kode embed yang dimaksud adalah kode CSS @font-face, kami asumsikan Anda faham bagaimana cara memilih font di Google Fonts. Pada tutorial kali ini kami menggunakan font di bawah ini untuk menambahkan teks Arabic sebagai contoh:

<link href='https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap' rel='stylesheet'>

Buka url yang ditandai pada kode di atas melalui browser, maka Anda akan menemukan kode CSS @font-face seperti di bawah ini:

/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIIoVeo5.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIkoVeo5.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIcoVQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Salin kode di atas dan tempelkan di kumpulan kode CSS pada blog Anda, tempelkan kode di atas tepat sebelum ]]></b:skin> atau sebelum /*]]>*/</style> untuk pengguna versi AMP (Accelerated Mobile Pages).

Cara paling mudah untuk menambahkan CSS adalah melalui desainer tema Blogger:

  • Pada dashboard Blogger, Klik Tema > Sesuaikan
  • klik tab Lanjutan,
  • klik menu dropdown 'Theme Color'
  • scroll kebagian bawah sampai Anda menemukan menu 'Tambahkan CSS'
    Add CSS
  • isi kode CSS pada kolom yang disediakan lalu klik Simpan

Mengaktifkan Font Baru

Setelah menambahkan kode CSS di atas font sudah terinstal pada blog Anda, untuk mengaktifkan atau menggunakan font tersebut Anda harus menambahkan peraturan baru untuk memanggil font family yg di instal pada blog Anda.

Karena font yang digunakan pada contoh tutorial ini adalah Aref Ruqaa, maka kode untuk mengaktifkannya adalah seperti di bawah ini:

font-family: 'Aref Ruqaa', serif;

Contoh penggunakan secara langsung pada postingan Anda adalah seperti di bawah ini:

<p style="font-family: 'Aref Ruqaa', serif;">السلام عليكم ورحمة الله وبركاته</p>

Hasil render dari kode di atas akan tampil seperti di bawah ini:

Aref Ruqaa

السلام عليكم ورحمة الله وبركاته

di atas adalah cara standar untuk menggunakan langsung font yang diinstal, walau bagaimanapun cara di atas terlihat merepotkan karena harus menulis nama font family secara berulan setiap kali ingin menggunakannya.

Cara yang Lebih Mudah

Anda bisa memanfaatkan CSS untuk penulisan kode yang lebih praktis dengan cara menambahkan classname baru pada kode CSS Anda, sebagai contoh:

.arabF{font-family: 'Aref Ruqaa', serif;}

Berdasarkan kode di atas Anda hanya perlu menambahkan class='arabF' untuk menggukan font baru di postingan, contoh:

<p class='arabF'>السلام عليكم ورحمة الله وبركات</p>

Tidak harus selalu tag <p>, Anda juga bisa menggunakan tag <div>, <span> atau tag lainnya.


Mengganti Font Bawaan pada Template

Untuk mengganti font bawaan pada template Anda hanya perlu mengganti kode CSS di bawah ini dengan nama font yang baru Anda instal:

--fontH: 'Noto Sans', sans-serif ;
--fontB: 'Noto Sans', sans-serif ;
--fontBa: 'Merriweather', serif ;
--fontC: 'Fira Mono', monospace ;

Beberapa template mungkin memiliki nama font berbeda.

Keterangan:
  • --fontH — Font family yang digunakan untuk heading artikel atau judul postingan.
  • --fontB — Font yang digunakan untuk isi artikel.
  • --fontBa — Font alternatif yang digunakan pada judul tertentu.
  • --fontC — Font yang digunakan untuk penulisan kode syntax.

Jika Anda menerapkan cara yang benar maka hasilnya kurang lebih seperti di bawah ini:

Aref Ruqaa:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

This guide only applies to adding fonts from Google Fonts, apart from being easier and free, the font families provided are also varied. For information, this theme also uses Google Fonts.

Install Fonts on Blog

Get Embed Code

The embed code in question is @font-face CSS code, we assume you understand how to choose a font in Google Fonts. In this tutorial we use the font below to add Arabic text as an example:

<link href='https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap' rel='stylesheet'>

Open the url marked above via a browser, then you will find the @font-face CSS code as below:

/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIIoVeo5.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIkoVeo5.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIcoVQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Copy all code above and paste it in CSS code set on your blog, paste the code right before ]]></b:skin> or before /*]]>*/</style> for AMP (Accelerated Mobile Pages) users.

The easiest way to add CSS is through the Blogger theme designer:

  • On Blogger dashboard, Click Themes > Customize
  • click Advanced tab,
  • click on 'Theme Color' dropdown menu
  • scroll down until you find 'Add CSS' menu
    Add CSS
  • fill in CSS code in the column provided then click Save

Activating New Fonts

After adding CSS code above, the font is already installed on your blog, to activate or use the font you must add a new rule to call the font family installed on your blog.

Because the font used in this tutorial example is Aref Ruqaa, then code to activate it's as follows:

font-family: 'Aref Ruqaa', serif;

An example of using it directly in your posts is as follows:

<p style="font-family: 'Aref Ruqaa', serif;">السلام عليكم ورحمة الله وبركاته</p>

The rendering result of the code above will appear like this:

Aref Ruqaa

السلام عليكم ورحمة الله وبركاته

The tutorial above is standard way to use installed font directly, even though the method looks inconvenient because you have to write name of the font family repeatedly every time you want to use it.

An Easier way

You can take advantage of CSS for more practical code writing by adding a new classname in your CSS code, for example:

.arabF{font-family: 'Aref Ruqaa', serif;}

Based on the code above you just need to add class='arabF' to use the new font in your post, for example:

<p class='arabF'>السلام عليكم ورحمة الله وبركات</p>

It doesn't always have to be <p> tags, you can also use <div>, <span> or other tags.


Changing Default Font in Template

To change default font in the template you only need to replace the CSS code below with name of the font you just installed:

--fontH: 'Noto Sans', sans-serif ;
--fontB: 'Noto Sans', sans-serif ;
--fontBa: 'Merriweather', serif ;
--fontC: 'Fira Mono', monospace ;

Some templates may have different font names.

Description:
  • --fontH — Font family used for article headings or post titles.
  • --fontB — Font used for body of article.
  • --fontBa — Alternative fonts used for certain titles.
  • --fontC — Font used for writing syntax code.

If you apply the correct method, the result will be something like this:

Aref Ruqaa:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.