how to assign different fonts with TranslatePress

Hello there,

You can do this using a bit of code. Go to Appearance –> Customize –> Additional CSS and add this code :

Normally, you will have to import it from google fonts like in the next example, but I don’t think those fonts are available:
@import url(‘https://fonts.googleapis.com/css?family=Padauk&display=swap’);

That’s why you will have to manually download and import the .ttf file using FTP. You can read more about this here: https://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/. What interest you in this case is the “Adding Custom Fonts in WordPress Using CSS3 @font-face” section.

Following that example, you will do something like this.
@font-face {
font-family: CloudYuanZhunGBK;
src: url(https://www.examplesite.com/files/wp-content/themes/fonts/CloudYuanZhunGBK.TTF);
font-weight: normal;
}

Now you will have access to the font using the name CloudYuanZhunGBK.

To add the font only on a translated version, you need to add it like this:

.translatepress-zh_MY {
font-family:CloudYuanZhunGBK;
}

Notice how I used the zh_MY code, you can replace that for any language you want.

By targeting the title or paragraph with CSS elements, you can also assign the font only for titles or paragraph.

For paragraph it is something like this:
.translatepress-zh_MY p {
font-family:CloudYuanZhunGBK;
}

For title I’m not sure, but you will have to either target the h1/h2/h3 element (depending on what you use for the title) or you can add (or already have a class assigned for it).

Here are two example:
.translatepress-zh_MY h2 {
font-family:CloudYuanZhunGBK;
}

.translatepress-zh_MY .title-class {
font-family:CloudYuanZhunGBK;
}

Best regards,
Cristian

• This reply was modified 3 years, 4 months ago by Cristian Draghia.

hi Cristian

sorry for this late reply. Actually i’m still trying to figure out your advice as it seems a bit technical for me. Nevertheless, it does help a lot and I managed to add the two fonts into my second language.

I am now having the below doubts:
1) font size: can i set the font size for certain content using something like below while tranlating my text:
EG: <span style=”font-size:xxem; line-height:xx;”>follow by my translation
It works pretty well with those that need special format. But my worry is, is this method allowed?

2) i use About in my menu as well as some of my titles. I noticed this particular word was automatically translated across the site after I translated once. Follow then, the font size of the About in my menu seems smaller than the rest of the menu-items. From the Element of Inspect, I noticed it was fixed to 90% unknowingly (I guess this was set during the earlier translation for the titles as quoted in (1)). I also noticed the below problem in the Element:

<span style=”font-family:dengxian; letter-spacing:0.01em;font-size:90%;”>有关</span>
The 2nd row seems should not have existed. Reason for saying so, for the rest of the menu items, it goes with the below format:
主页

If my opinion is right, how to remove the 2nd row from my Element for About? I guess if this problem can be iron out, it helps with the font-size issue.

Pls helps. Thanks and Stay Safe

sorry, the href detail is missing from the above msg.

all the menu-items are having the below format in Element like:

主页, i.e without the 2nd row quoted in previous msg.

oops again, it seems this link doesn’t allow me to key in the href detail.

hope my msg is clear.
kindly help

Hello,

I’m sorry for the late reply.

1) You can definitely translate the string by including HTML and CSS elements, there is nothing wrong with this.

2) This happens because our plugin works with individual strings. This means that if you translate the string About on a page, it will be translated everywhere on your site.

There are different ways to solve this, but I think the better one is to wrap the About text (not the menu one) between a <span class=”about-class”><span> element. Then using Custom CSS you can apply whatever changes you want directly on the about-class. This way you won’t have to include the changes in the translation.

To add the changes only on a translated language, you can do it by adding CSS via your Customizer interface: WordPress -> Appearance -> Customize -> Additional CSS

Then add this CSS to it:

.translatepress-zh_MY .about-class {
letter-spacing:0.01em;
font-size:90%;
}

Notice how I added the class .translatepress-zh_MY. By replacing the zh_MY with the right language code, you can display CSS changes only on the desired languages.
For example, using .translatepress-en_US .about-class { } will only display the changes on the default English (United States) language.

Best regards,
Cristian

• This reply was modified 3 years, 4 months ago by Cristian Draghia.

alright. Finally I managed to deal with the problem. Thanks

@cristiandraghia I managed to change the fonts for everything except buttons, what code should i use to change the button font.