WordPress Management by Tuhin

by Engr Kh Mashiur Rahman | Feb 13, 2023 | IT WordPress

WordPress Management by Tuhin

WordPress Management by Tuhin

How to Change Custom Fonts in WordPress -English/Arabic/Bangla/Google

by Engr Kh Mashiur Rahman | Jan 31, 2023 | IT WordPress

How to Change Custom Fonts

Google Fonts Setting

Go to fonts.google.com >> Select Arabic Language>> Select and click on a Font >>Click on font size >> Click on View Selected families box >> It will show code >> Click on Import option button >> Click this code and copy below code

Paste Generate Code of Google Fonts in Additional CSS/Style.css

 @import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&display=swap');

Go to customize >> Then go to “Additional CSS ” >> and Paste it on “Additional CSS “

Block Wise Font Change in Guttenberg Editor

Generate a class in Additional CSS/Style.css and input CSS font variables to make it enhance. An example is given below-

.paragrahp_fonts {
	line-height: 2.2em;
	font-size: 40px;
	font-family: 'Amiri Quran', serif;
}

Tricks and Ticks

@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
body{font-family: 'Amiri', serif;}

body {
margin: 0;
font-family:'Amiri', serif !important;
}

.our
body,td,p{font-family: 'Alkalami', serif;}

body,td,p{font-family: 'Amiri', serif;}

List of Arabic Fonts with code

I have generate some codes below, just copy it and paste it on “Additional CSS” . As a result Arabic Fonts will change globally

Noto Sans Arabic Font *******

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic&display=swap');
*
{font-family: 'Noto Sans Arabic', sans-serif;}

12. Noto Naskh Arabic Font *****

@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic&family=Readex+Pro&display=swap');
*
{font-family: 'Noto Naskh Arabic', serif;}

Amiri Quran Font ****

@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&display=swap');
*
{font-family: 'Amiri Quran', serif;}

El Messiri **

@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=El+Messiri:wght@500&display=swap');;
*
{font-family: 'El Messiri', sans-serif;}

Lateef Font ***

@import url('https://fonts.googleapis.com/css2?family=Lateef&display=swap');
*
{font-family: 'Lateef', serif;}

Mirza Font ***

@import url('https://fonts.googleapis.com/css2?family=Lateef&family=Mirza&display=swap');
*
{font-family: 'Mirza', cursive;}

Cairo Play Font ***

@import url('https://fonts.googleapis.com/css2?family=Cairo+Play&display=swap');
*
{font-family: 'Cairo Play', cursive;}

Katibeh Font **

@import url('https://fonts.googleapis.com/css2?family=Katibeh&display=swap');
*
{font-family: 'Katibeh', cursive;}

Scheherazade New Font ***

@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap');
*
{font-family: 'Scheherazade New', serif;}

Cairo Font

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;600&display=swap');
*
{font-family: 'Cairo', sans-serif;}

Tajawal Font

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;600&family=Tajawal&display=swap');
*
{font-family: 'Tajawal', sans-serif;}

Mada Font

@import url('https://fonts.googleapis.com/css2?family=Mada&display=swap');
*
{font-family: 'Mada', sans-serif;}

Changa Font

@import url('https://fonts.googleapis.com/css2?family=Changa&display=swap');
*
{font-family: 'Changa', sans-serif;}

Amiri Font **

@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
*
{font-family: 'Amiri', serif;}

IBM Plex Sans Arabic Font

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@1,700&display=swap')
*
{font-family: 'IBM Plex Sans Arabic', sans-serif;}


Almarai

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@800&display=swap');
*
{font-family: 'Almarai', sans-serif;}

Readex Pro Font

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro&display=swap');
*
{font-family: 'Readex Pro', sans-serif;}

Markazi Text Font

@import url('https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap');
*
{font-family: 'Markazi Text', serif;}


Vazirmatn Font

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap');
*
{font-family: 'Cairo', sans-serif;}

Baloo Bhaijaan 2 Font

@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap');
*
{font-family: 'Baloo Bhaijaan 2', cursive;}

How to Change Custom Fonts

To add custom fonts in WordPress, you can follow these steps:

1. Find the font you want to use and download it to your computer.
2. Upload the font files to your WordPress site. You can do this by going to your WordPress dashboard and navigating to Appearance > Editor > functions.php. Add the following code to the bottom of the file:

@font-face {
    font-family: 'Font Name';
    src: url('path/to/font.ttf') format('truetype'),
         url('path/to/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Replace ‘Font Name’ with the name of your font and ‘path/to/font.ttf’ and ‘path/to/font.woff’ with the location of your font files.

3. Save the file and refresh your site. Your font should now be available to use in your theme.
4. To use the font in your theme, you will need to add CSS code to your stylesheet. Go to Appearance > Editor > style.css and add the following code:

body {
    font-family: 'Font Name', sans-serif;
}

Replace ‘Font Name’ with the name of your font.

5. Save the file and refresh your site. Your font should now be applied to your site.

Custom Web Fonts in Twenty Twenty Three Theme (Method 1)

If you’re using the default Twenty Twenty Three theme in WordPress, here’s how you can set the Arabic font:

• Choose an Arabic Font: Select the Arabic font you want to use on your WordPress website. You can find Arabic fonts from font websites or perform an online search.
• Install the Arabic Font: Download the font files to your computer. Typically, fonts come in a zip file format. Extract the font files from the zip folder.
• Create a Child Theme (Optional): It’s recommended to create a child theme before making any modifications to the Twenty Twenty Three theme. This ensures that your changes won’t be overwritten when the theme is updated. You can follow the WordPress documentation to create a child theme.
• Upload the Font Files: Connect to your WordPress website using FTP or through the hosting file manager. Navigate to the child theme directory (e.g., wp-content/themes/twentytwentythree-child) and create a new folder named “fonts.” Upload the Arabic font files (e.g., .ttf, .woff) to this “fonts” folder.
• Edit the Child Theme’s CSS: In the child theme directory, locate the style.css file and open it with a text editor.
• Add Font-Face CSS Code: Inside the style.css file, add the following CSS code to define the Arabic font face:

@font-face {
  font-family: 'YourFontName';
  src: url('fonts/fontfile.ttf') format('truetype');
  /* Add more src lines if your font has multiple file formats (e.g., .eot, .woff) */
}

• Replace ‘YourFontName’ with the desired font name and ‘fonts/fontfile.ttf’ with the relative path to the font file within the child theme’s “fonts” folder.
• Apply the Arabic Font to the Website: To apply the Arabic font to specific elements, such as headings or paragraphs, you’ll need to target those elements in the CSS. For example:

body {
  font-family: 'YourFontName', sans-serif;
}

• Replace ‘YourFontName’ with the font name you specified in the previous step. You can target specific elements by using their corresponding CSS selectors.
• Save the Changes: Save the style.css file and upload it back to your WordPress website, replacing the existing file.
• After following these steps, the Arabic font should be applied to your Twenty Twenty Three theme. Remember to clear any caching plugins or CDN caches you may be using to see the font changes take effect.

FAQ

WordPress Answer >> wordpress.org/support/topic/font-issue-when-switching-to-arabic/
You can change the font of the arabic usign a bit of coding.
Go to Appearance –> Customize –> Additional CSS and add this code :

@import url(‘https://fonts.googleapis.com/css?family=Padauk&display=swap’);
body.translatepress-ar{ font-family:Padauk; } // Use your desired font and language code

Tutorial Links