Complete Guide to Changing or Adding New Fonts

Pro Blogism
Step by Step Changing / Adding a New Font in the Median UI Template

This article is a copy of an article on Median UI, more or less how to add a new font the same in each template, therefore you can apply the same method to the Fletro Pro template.

Search for a suitable font on Google Fonts

The fonts used in this template are all taken from Google Fonts, if you want to change them 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 you can use to get the embed code, first with tags and the second with CSS @import, in this tutorial we use tags and the embed code that we get is as below:

<link href="https://fletro.jagodesain.com/2020/11/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 embed code to the CSS template

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

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

@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;}@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 that it’s easier to paste the above code right before the code ]]>

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 fonts

The first case is to add the font above to become an alternative font in this template, so that it’s easier to use, we added a new CSS selector so you don’t have to bother rewriting it. font-family: every time using 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 an attribute class = “arabic-font” 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 template font

The second case you want to replace the default font of this template with the font above. Please note that in this template there are two default fonts that are most often used, namely the heading font (h1, h2, h3, h4, h5) for the title and subtitles of the article and the body font for the content of the article. the caller code of these two fonts is:

<Group description="Fonts"><Variable name="body.font" description="Font body" type="font" default="$(fontBody)" value="https://fletro.jagodesain.com/2020/11/&#39;Nunito Sans&#39;, sans-serif"/><Variable name="heading.font" description="Font heading" type="font" default="$(fontBody)" value="Poppins, sans-serif"/></Group>

For example we want to change the body font in this template to ‘Aref Ruqaa‘then what you have to do is change the part marked in the code above with the name of the selected font, the result is like this:

<Variable name="body.font" description="Font body" type="font" default="$(fontBody)" value="https://fletro.jagodesain.com/2020/11/&#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;

Urgent!
If the name of the font you choose consists of two or more words, then the writing must be enclosed in quotation marks as in the case above the font name. Aref Ruqaa has two words, for example as below:

  • Font name Aref Ruqaa has two words then the writing is like this: font-family: ‘Aref Ruqaa’, sans-serif
  • Font name Poppins only has one word then it is written like this: font-family: Poppins, sans-serif

Example of implementing font replacement

This is the content of the article with a different font as a result of the implementation of the code above, it is also clear in the sub-title above the application of the new font in the heading tag, please try and be creative with the font of your choice. If you have questions about fonts or something is not clear from the tutorial above, please write in the comments column of this post