Button font - Simplified Chinese

This thread is resolved. Here is a description of the problem and solution.

Problem:
If you're experiencing issues with mismatched fonts for buttons in Simplified Chinese on your website, it might be due to the theme or plugins using different fonts for specific elements.
Solution:
We recommend applying custom CSS to ensure consistency across different languages. For instance, to set a specific font for Simplified Chinese, you can add the following CSS code in your website's backend under Appearance > Customizer > Custom CSS:

html[lang="zh-hans"] .et_pb_button {<br />    font-family: 'Nunito', sans-serif !important;<br />}

This code targets the buttons and applies the 'Nunito' font family specifically for the Simplified Chinese language version of your site. Adjust the font family as needed to match your design requirements.

Please note that while we strive to provide helpful examples, these solutions might become outdated or may not directly apply to your specific situation. If this solution does not resolve your issue, or if you encounter different problems, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please do not hesitate to open a new support ticket at WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: Exception

This topic contains 4 replies, has 2 voices.

Last updated by Mihai Apetrei 10 months ago.

Assisted by: Mihai Apetrei.

Author	Posts
July 18, 2024 at 11:08 pm #15975120
jupjitG	Background of the issue: I've published my client's website, and the Chinese Simplifies characters in the buttons are different: hidden link Symptoms: The fonts for buttons in Simplified Chinese are not matching. Questions: How can I get the fonts to match for buttons in Simplified Chinese?
July 18, 2024 at 11:11 pm #15975139
jupjitG	I have two buttons on the page. I have used code to create the smaller buttons, which are not posing a problem (attached). The WordPress buttons are giving me troubles (attached)
July 19, 2024 at 11:58 am #15978145
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi there. There is a chance the theme or one of the active plugins is using a different font for that block but you have full control over changing that. In order to use different fonts for each translation (or in order to set the font family for a specific language), you could use CSS code as in the example below: html[lang="ar"] {font-family: "Cyrillic Barlow Condensed Reg" !important; font-size: 20px !important; font-weight: 600 !important;} The code above is just an example and depending on your site layout you’ll need to apply the CSS code and just play with the values. For example, if you want to target all the paragraphs inside the site, this means that we will need to add into the mix the <p> tag (which is the HTML tag for the paragraph). html[lang="ar"] p{ font-family: "Hoverla Font ENG" !important; font-size: 24px !important; } If you would like to target more HTML tags, you can use something like this: html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] h1{ font-family: "Hoverla Font ENG" !important; font-size: 24px !important; } Please note that custom CSS is out of the purpose of our Technical Support guidelines, but I still wanted to share with you some examples that you can follow. Please let me know how things go. Mihai Apetrei
July 19, 2024 at 5:09 pm #15979441
jupjitG	Hi Mihai. Thanks for getting back to me on this. Is there a particular font I can use to target that specific button? If so, what is it, and how can I implement? Thanks- J
July 21, 2024 at 9:29 pm #15983840
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi there and welcome back! Please add the following CSS code inside your website's backend: Appearance > Customizer > Custom CSS > then save: html[lang="zh-hans"] .et_pb_button { font-family: 'Nunito', sans-serif !important; } This should fix that for you. The correct font name that you want is "Nunito" and it seems that this Divi button uses a different font (as you will see in the screenshot).