Home

Step by Step Change / Add New Font #tips

 


Search your best font on Google Fonts

The fonts used in this template are all taken from Google Fonts, if you want to change the first, please find the font you like first. We'll assume that you understand how to search for fonts in Google Fonts because of its very easy-to-understand UI.

Request an embed code

Next is after you find a suitable font, select it and copy the embed code provided. In this example, we want to add a new font called 'Aref Ruqaa' to this template.

There are two options that you can use to get the embed code, first with the <link> tag and the second with CSS @import, in this tutorial we use the <link> tag and the embed code we get is as below:



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

Penulisan CSS untuk mengubah font family-nya seperti dibawah ini:

font-family: 'Aref Ruqaa', serif;


Adding the implant code to the CSS layout

You can directly copy and paste the code above into the <head> tag of your blog, but in this tutorial article, we chose to use CSS @ font-face because almost all browsers support this CSS.

To get the @ font-face code, please copy the URL marked in the embed code above and open it in your browser, the font-face CSS code will appear as below:



/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Aref Ruqaa Regular'), local('ArefRuqaa-Regular'), url(https://fonts.gstatic.com/s/arefruqaa/v10/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 */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Aref Ruqaa Regular'), local('ArefRuqaa-Regular'), url(https://fonts.gstatic.com/s/arefruqaa/v10/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 the code above and paste it in the CSS code group on your template, so it's easier to paste the above code right before the code ]]> </ b: skin> The font above has two versions, namely the Arabic and Latin versions, in this tutorial we will use the Latin version to change the heading font and Arabic to add a new font.

The font above has two versions, namely the Arabic and Latin versions, in this tutorial we will use the Latin version to change the heading font and Arabic to add a new font.

Added new font styles

The first case is to add the font above to become an alternative font in this template, to make it easier to use we added a new CSS selector so you don't have to bother rewriting the font-family: every time you use a new font. For example, the following is the CSS code that we created to call the font above:

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

font-family: diambil dari kode embed pada tahap awal.
To display a new font on your page based on the CSS selector above, you only need to add the class = 'arabic-font' attribute in your article, for example as below:
<p class='arabic-font'> Disini_isi_tulisan_Anda </p>

Tidak selalu tag <p> anda juga bisa menggunakan tag lain misal <div> dan sebagainya
The result will look like this:

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

Change the default layout text style

In the second case you need to supplant the default textual style of this layout with the text style above. Kindly note that in this format there are two default text styles that are frequently utilized, specifically the heading textual style (h1, h2, h3, h4, h5) for the title and captions in the article and the body text style for the substance of the article. the guest code of these two textual styles is:
<Group description="Fonts">
<Variable name="body.font" description="Font body" type="font" default="$(fontBody)" value="&#39;Nunito Sans&#39;, sans-serif"/>
<Variable name="heading.font" description="Font heading" type="font" default="$(fontBody)" value="Poppins, sans-serif"/>
</Group>
For instance, we need to change the body text style in this layout to ' Aref Ruqaa ', so you should simply change the part set apart in the code above with the name of the chose text style, the outcome is this way:
<Variable name="body.font" description="Font body" type="font" default="$(fontBody)" value="&#39;Aref Ruqaa&#39;, sans-serif"/>

karena sudah terdapat tanda kutip pada atribut value="..." maka untuk menghindari error, penulisan 'Aref Ruqaa' diubah menjadi &#39;Aref Ruqaa&#39;