Using two different typefaces to accommodate two distinct languages on a single webpage

Let me clarify my situation. I want to create a platform where users can input text in both Hebrew and English, regardless of the language of the website itself. This means that users could type in Hebrew on an English website and vice versa. My goal is to have matching fonts for each language so that the input box looks visually appealing in both English and Hebrew.

My question is: How can I implement two different fonts for two languages within one element?

Just a heads up, using :lang(he) is not the solution as it only recognizes language based on the HTML attribute lang. It is similar to using [lang=he]

htmlcsssassmultilingual

Answer №1

From my understanding, this process should occur automatically. Simply designate both fonts using the following code: 

font-family: 'Arial', 'Arial (Hebrew)';
. Here is an example you may find helpful: this.

Answer №2

In my opinion, utilizing the lang selector in this manner could be beneficial:

:lang(en)   {
    font-family: 'Helvetica Neue', Helvetica, Arial, "Segoe UI", sans-serif;
    font-size: 120%;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize MUI Tabs to resemble the design of Bootstrap Nav Tabs

Looking to customize Material UI Tabs to resemble Bootstrap Tabs. Made significant changes, but struggling with removing the border-bottom on the activeTab. In Bootstrap, they use marginBottom: -1px on the active tab, but it doesn't work for me. Any s ...

cssreactjstwitter-bootstrapmaterial-ui

Deactivate the Submit button when the database field has been populated

My form includes a submit button. The Submit button should be disabled if the "price" for a specific product is already filled: PHP Code <?php $host="localhost"; $username="root"; $password=""; $db_name="ge"; $con=mysqli_connect("$h ...

javascriptphphtmlmysql

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: https://i.sstatic.net/gNm14.png However, when I switch over to desktop view, ...

htmlcssnext.jsresponsive-design

How do I simulate a checkbox click with jQuery based on the text included in its ID?

Below is a sample table with checkboxes: <table> <tr> <td><input id="aaa_1" type="checkbox" /></td> <td>1</td> </tr> <tr> <td><input id="aaa_2" type="checkbox" /></td> ...

jqueryhtml

New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

I am eager to dive into Bootstrap 4 and data visualization charts. I want to replicate the visualizations found in the link below. However, after copying and pasting the code into Atom, it's not functioning as expected. I ensured that I copied the HT ...

javascripthtmlcssbootstrap-4

Arrangement of SVGs within one another

I am working on achieving a layout with multiple SVG elements arranged in a specific way. This layout involves a top-level gray box containing several orange boxes, each of which holds red boxes. The width and height of the top-level SVG are known. https: ...

htmlcsssvg

The complete height of the website is concealed by the mobile toolbar/menu

I encountered a perplexing issue regarding the responsive resizing of a website on mobile devices. The problem arises when the full height extends over the toolbar/menu, unless the user manually hides the toolbar. Is there a way to dynamically resize the ...

javascripthtmlcssreactjsresponsive-design

When is the appropriate time to nest CSS class selectors within other class selector definitions?

REVISED 1 After receiving feedback, I made the following changes: .lower-container { justify-content: center; position: absolute; width: 92vw; // height: 46vh; <--- no set height /* nested classes for adjusting position and height of low ...

css

Autofill functions may not be compatible with input fields generated using JavaScript

Having trouble with browsers not using autocomplete in login overlays generated with JavaScript? It can be really annoying. Any suggestions on how to fix this issue? Should I create a hidden form within the original HTML and then move it into the overlay? ...

javascripthtmlcss

Using session variables on a different php page

Having trouble using a session variable in another page? I fetched data from a database and stored it in a variable, but when I attempt to use it on another page, I get an error saying 'undefined index'. See the code below - can someone help me s ...

phphtml

Change the selection so that only the initial one appears in gray

Is there a way to make the text inside a select field gray out when the first option is selected? Can this be accomplished with just CSS or does it require JS? I have attempted altering the style of the first option, but it only affects the text color in ...

htmlcss

What caused Safari to only show half of the page?

Whenever I browse my website using Safari, I noticed that if the total size of the content on the first page is less than 100vh, Safari ends up cutting off half of the page. To fix this issue, I added a CSS rule in the body setting min-height to 110vh wh ...

cssreactjsnext.jssafari

I keep getting redirected to a blank page by JS

I've created a JavaScript script that smoothly fades in the page when a user enters it and fades out when they click a link to another page. The script is working as intended, but I'm facing an issue with anchor links on the page. Whenever I clic ...

javascriptjqueryhtml

Using React Redux to Calculate the Grand Total Price of all Products Added to Cart

<div className='container py-4 my-5'> {item.length === 0 ? ( <p> cart is empty, <NavLink to='/'>continoue shopping</NavLink> </p> ) : ( item.map((cart) => { return ( & ...

htmlreactjsreduxredux-thunk

Pass the ID of the <a> element from one function to another

I am a beginner in javascript/jQuery, so please be patient with me if my question seems too simple for you and too challenging for me. I have a function that I won't post the entire code for because it would make this too lengthy. Another function ...

javascriptjqueryhtmljsonajax

Navigate to a different URL following a post request using AJAX and EXPRESS

Currently, I am diving into the world of node.js servers by creating a login website. Users can input their username, which is then sent via an ajax post request to the server and stored in an array of all users. My goal is to redirect users to a personali ...

javascripthtmlnode.jsexpress

Trouble with image rotation in jQuery/JavaScript slideshow

For more information, you can visit and click on the Canucks icon, which is located as the third icon below "information architecture and usability." I am attempting to set up a jQuery slideshow by utilizing a template I found online. However, I am encou ...

javascriptjqueryhtml

Guide to incorporating a logo into a personalized WordPress theme

In the process of creating a WordPress theme from scratch, I've hit a roadblock while trying to incorporate a logo in the top left corner of the page where the title would normally be displayed. <h1> <a href="<?php echo home_url(); ?> ...

phphtmlcsswordpresswordpress-theming

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

Is there a way to make videojs go full screen on Android devices when the URL is entered, without displaying the address bar? ...

javascriptandroidhtmlhtml5-video

Having issues with the horizontal list layout

I am having trouble implementing Bootstrap horizontal lists on my website. How can I resolve this issue? Desired outcome: https://i.sstatic.net/zzBFi.png Current situation: https://i.sstatic.net/cfoZN.png Below is the snippet of CSS code in question ...

htmlcsstwitter-bootstrap