What is the process for incorporating a backup font for displaying unsupported characters in font-face?

I have incorporated a unique font for the Hebrew language on my website, but I am encountering an issue with missing English characters from a-b, A-Z.

Currently, I have applied the font (reformaregular) to the body tag:

body { font-family: 'reformaregular', Arial, Halvetica, sans-serif; }

However, the English characters default to Times New Roman serif font on Windows OS.

You can see the contrast between the English serif and custom Hebrew fonts in the display above.

In order to address this problem without manually tagging each element with a custom .en class;

I am seeking guidance on how to implement a fallback option for the English font?

htmlcssutf-8font-facehebrew

Answer №1

It appears that you can achieve this by utilizing CSS and the unicode-range property.

To learn more about @font-face/unicode-range, please visit: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

Here is a quick example:

@font-face {
    font-family: Almoni;
    src: url(Almoni.ttf);
    unicode-range: U+0590-05FF;
}
@font-face {
    font-family: CoolOtherLanguageFont;
    src: url(CoolOtherLanguageFont.ttf);
    unicode-range: U+0370-03FF, U+1F00-1FFF;
}
body {
    font-family: Almoni, CoolOtherLanguageFont, Helvetica;
}

Answer №2

If you are looking to use different fonts for different languages, it can be a bit tricky. For instance, if your chosen Hebrew font does not support the English character set (or numbers), you may face some challenges. One solution we have discovered is to implement a javascript code that identifies non-Hebrew characters and then adds an additional class called .english or includes a lang attribute specifying the correct English font.

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

How to handle users with disabled Javascript? Considering redirection to alternate sites for users with script disabled?

I've dedicated today to strategizing the best approach for revamping our company's website, taking into consideration that less than 1% of web users have JavaScript disabled. Our management team strongly believes in ensuring that our website rem ...

javascriptjqueryhtmlcss

JavaScript allows you to export a variable from a function

I simply want to access the value of the userId variable for any use. async function getMyData(){ const token = ''; spotifyApi.setAccessToken(token); const data = await spotifyApi.getMe(); let userId = data.body.id; retu ...

javascripthtmlfunction

When including external links, the domain is always placed at the beginning of the link, even if the link

Issue: Hyperlinks are displaying our domain name before the actual link. The text stored in our database is as follows: To learn more about Rich Habits <a href=”http://www.externaldomain.com”>click here.</a> When we echo this text in our ...

phphtmlurlhyperlinkhref

Pictures failing to appear in css/jquery slider

I have a total of 12 divs that are configured to display a thumbnail along with some text dynamically retrieved from a database query. When displayed individually, they appear fine in a column format with a border around them showcasing the thumbnail and t ...

jquerycsseasyslider

Manipulating a textarea in jQuery by inserting a string and selecting a specific portion of it

Just as seen on SO with the B button: **bold text** Including that bold text is automatically highlighted and the cursor is placed right before the b ...

javascriptjqueryhtmltextarea

The hover effect for a :before class is not functioning as intended

I have created a dropdown menu with a triangle at the top in this style: When the cursor hovers over only the triangle, it appears like this: However, when the cursor is over the div, the hover effect for both elements is activated as shown here: I am t ...

css

What is the process for setting up custom HTML tags in Resharper?

I am looking to customize my HTML files by using custom tags to incorporate knockout components [1]: <like-widget params="value: userRating"></like-widget> To enable the tag in VisualStudio's HTML formatting settings, I made the followin ...

htmlresharpercustom-tags

Utilizing a variable in one function within a separate function (Guide to Calculating Combinations)

As a beginner in JavaScript, I'm struggling with using a variable from one function in another function. My current project involves creating a combination calculator, but I'm facing issues with getting the output when using this script code. ...

javascripthtmlfunction

The quickest method to modify the anchor element's class depending on the query string

Requirement - I aim to accomplish this task using only pure JavaScript without any additional libraries, although I am open to using one if necessary. I need to assign an extra class to anchor elements that contain a query string of 'xyz=negate' ...

javascriptjqueryhtml

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

Is there a way to set a higher priority over the "!important" rule on my website?

I'm encountering a strange issue with my website. I have been working on this website and am looking to change the color of the main menu hover links from white to orange. Here is the CSS related to that section: .darkheader .navigation > ul > ...

csswordpressthemesoverriding

What is the best way to align navigation arrows vertically?

I am working on a modal album that displays images of various sizes. My issue is with styling the navigation arrows to appear in the center of the page, regardless of the image size. I have included my code below: <div class="row img-box"> <d ...

htmlcssbootstrap-4

Challenges with Implementing Background Images on my Website with HTML and CSS

Being new to the world of coding, I recently created a website for a college presentation. However, after uploading the website onto the internet, I noticed that the background images from my files are not displaying on the website. It's likely that I ...

htmlcss

Angular 2 Component attribute masking

In my Angular 2 component called Foobar, I have defined a property named foobar: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-foobar', templateUrl: './foobar.component ...

htmlangulartypescript

Tips for highlighting the sticky subnav menu option as you scroll

Currently utilizing intersection observer to toggle the visibility of the sticky navbar and make the scroll bar sticky. I am now looking to add a feature where the sub nav options highlight with color as we scroll, focusing on the container with a specific ...

javascripthtmlcssvue.jsvuejs3

Enhancing the appearance of specific text in React/Next.js using custom styling

I have a table and I am currently working on implementing a search functionality that searches for an element and highlights the search terms as they are entered into the search bar. The search function is functional, but I am having trouble with the highl ...

javascriptcssarraysreactjsnext.js

Stop unwanted overrides of CSS3 blinking background colors

I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...

htmlcssbackground-colorcss-animations

issue with stacking data in Google Charts

Check out my HTML code: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></scri ...

htmlgoogle-visualization

Every DIV is filled with HTML and CSS

My navigation bar currently has icons placed at the center of a DIV, but I would like to fill up the entire DIV without any spaces left on the sides. The HTML code for the DIV containing the icons is as follows: <nav class="navbar navbar-expand navbar ...

htmlcssreactjsbootstrap-4react-bootstrap

Exploring Text Color Verification with CSS in Selenium IDE

I am working on a project and want to ensure that my link is styled properly: <a class="title">My link</a> The CSS code used to style my link is as follows: a.title { color: #CC3333; } How can I confirm that the text "My link" is displayi ...

cssideselenium