Step by Step Change / Add New Font in Median UI 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 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 embed code to the CSS template
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.
Added new fonts
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 sebagainyaThe 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 in 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="'Nunito Sans', 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 ', so all 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="'Aref Ruqaa', sans-serif"/>
karena sudah terdapat tanda kutip pada atribut value="..." maka untuk menghindari error, penulisan 'Aref Ruqaa' diubah menjadi 'Aref Ruqaa'Urgent!
If the font name 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:
- The font name Aref Ruqaa has two words so it is written like this: font-family: 'Aref Ruqaa', sans-serif
- The Poppins font name has only one word so 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 a 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
Post a Comment