Type on the web
Hebrew Fonts on the Web: RTL, Loading, and Readable UI
A Hebrew font supplies letter shapes. It does not set the reading direction of a document, fix a reversed string, or decide where an email address belongs. Good web typography comes from making each of those responsibilities explicit.
A font and RTL solve different problems
There are three separate checks. Does the font contain the characters? Did the browser load the intended file? Is the text laid out in the correct direction? A missing glyph, an unexpected fallback font, and incorrectly ordered punctuation can look like one “Hebrew problem,” but require different fixes.
Use semantic direction markup for a Hebrew container and isolate known left-to-right strings, such as an email address. Alignment alone is not direction. Keep stored text in its normal logical order; reversing the characters to repair a layout breaks selection, copying, and mixed text.
Load the right file and declare its weight
Use the webfont files supplied for your licensed use. A static Regular file should be declared as its own weight; do not declare a wide range and expect the browser to create a designed family from it. For a variable file, use only the range and axes that the file actually contains.
The example below illustrates a static setup. The filenames are example paths: replace them with the licensed files you host. They are not download links. A fallback keeps text available while the font loads, but different metrics can change wrapping. Check the transition instead of assuming that one font-display value solves every layout shift.
/* Example paths: replace with your licensed webfont files. */
@font-face {
font-family: "Project Efrat";
src: url("/fonts/efrat-regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Project Efrat";
src: url("/fonts/efrat-bold.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
.event-card {
font-family: "Project Efrat", Arial, sans-serif;
line-height: 1.6;
padding-inline: 1.25rem;
text-align: start;
}Build a small bilingual interface
The live card uses Efrat for the information and Keshet for the Hebrew display heading. Each font has a clear role. Add a long event name and watch the layout rather than assuming the short example represents all future content. A second display face also adds a loading cost, so use it where it contributes something visible.
The markup example keeps an email address in a left-to-right isolated span. For unknown user-generated text, consider direction detection such as dir="auto" and test representative strings. Direction rules need to follow the content; a fixed left alignment is not a substitute.
<article class="event-card" lang="he" dir="rtl">
<h2>ערב של עיצוב</h2>
<p>יום חמישי · <bdi dir="ltr">19:30</bdi></p>
<p>לפרטים: <bdi dir="ltr">hello@example.com</bdi></p>
</article>The live specimen is loading. You can also view this font on its specimen page.
The live specimen is loading. You can also view this font on its specimen page.
An illustrative event card. The contact address is an example, not a booking link.
Diagnose before replacing the font
If all text uses the fallback, inspect the network request, URL, response type, and font-family spelling. If only some characters fall back, inspect character coverage and any subsetting. If Bold looks unexpectedly different, check which file is actually selected and whether the browser is synthesizing a missing weight.
If the letters exist but numbers or punctuation appear in the wrong place, check direction and isolation. If text jumps as the page loads, compare fallback and final metrics, then inspect font loading and reserved layout space. These are distinct branches of the investigation; changing typefaces at random hides the cause.
Test the delivered page
Use browser developer tools to confirm the actual font, network response, and transferred bytes. Test a cold load and a repeat visit, a narrow viewport, browser zoom, long labels, and mixed-language strings. Compare static and variable delivery with the real files before claiming that either is smaller or faster.
Keep the content selectable and readable without an interactive specimen. Review the current font license for the intended web use and file handling. For detailed direction rules, consult the W3C guidance linked below; for visual size and hierarchy, continue with the readability and pairing guides.