Question Details

No question body available.

Tags

css fonts font-face webfonts

Answers (2)

June 19, 2026 Score: 1 Rep: 84,746 Quality: Medium Completeness: 60%

You're adding the Arimo font twice via both @imports neither of which limits the unicode range in the way you intend, while the @font-face definition has multiple errors and is not loading the font.

I suggest loading Alef via the @import, and Arimo via a corrected @font-face, like this:

@import url("https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap");

/ hebrew / @font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/arimo/v36/P5sMzZCDf9T10bxCF8jA.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

body { font-family: serif; } span { font-size: 1.1rem; font-family: sans-serif; } .Arimo.Alef { font-family: Arimo, Alef, sans-serif; } .Arimo { font-family: Arimo, sans-serif; } .Alef { font-family: Alef, sans-serif; }

JS Bin

Arimo then Alef:
הַשֶּׁמֶשׁ זוֹרַחַת בַּשָּׁמַיִם. הַיּוֹם הוּא יוֹם יָפֶה. אֲנִי לוֹמֵד עִבְרִית this is a test

Arimo only:
הַשֶּׁמֶשׁ זוֹרַחַת בַּשָּׁמַיִם. הַיּוֹם הוּא יוֹם יָפֶה. אֲנִי לוֹמֵד עִבְרִית this is a test

Alef only:
הַשֶּׁמֶשׁ זוֹרַחַת בַּשָּׁמַיִם. הַיּוֹם הוּא יוֹם יָפֶה. אֲנִי לוֹמֵד עִבְרִית this is a test

Neither:
הַשֶּׁמֶשׁ זוֹרַחַת בַּשָּׁמַיִם. הַיּוֹם הוּא יוֹם יָפֶה. אֲנִי לוֹמֵד עִבְרִית this is a test


Note that the above is to explain your font problems. As pointed out in the comments, it is not a substitute for correct HTML markup.

June 20, 2026 Score: 0 Rep: 19,806 Quality: Medium Completeness: 100%

As explained by Alohci the main problem with your current CSS is the font file reference:

Google font API URLs are dynamic CSS queries not font file URLs – returning parameter-based CSS rules (also including agent detection a.k.a »browser-sniffing«).

You can easily check it by entering the URL in your address bar

The src property @font-face expects a URL to a specific font-file – woff2, woff, ttf or otf.

Browser font loading is property agnostic

By »property« I'm referring to intrinsic font properties such as the font family name, font-weight, style (italic or upright) etc. as specified in the font files data records. In other words:

The browser doesn't care, whether the referenced »Arimo« font-file is actually a proper »Arimo« or e.g. a »Alef« or if it is intrinsically bold, regular or italic.

That said – you can easily map arbitrary font files to any »font-family« context as you like.

»Language« based font switching?

As you already noticed, the crucial CSS property is unicode-range mapping files according to certain unicode ranges (similarly to weight/style based mapping).

/ Latin /
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

/ Hebrew/ unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;

To be precise, the browser is actually not detecting any language but swaps between fonts according to the unicode-ranges as required per string inputs/markup.

This is what the google fonts API also heavily utilizes:
Font-files are split into subsets: e.g latin, latin-extended, vietnamese, hebrew etc.

Font-family mapping

Here's a simplified example »merging« font-families Arimo and Alef for Latin and Hebrew unicode ranges:

/ latin – map to Alef (only static) /
@font-face {
  font-family: 'AlefArimo';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/alef/v24/FeVfS0NQpLYgnjVRCg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/ hebrew – map to Arimo / @font-face { font-family: 'AlefArimo'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/arimo/v36/P5sfzZCDf9T3cV7NCUECyoxNk37cxcAhrBZQI.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

h3 { font-size: 1rem; margin: 0; }

p { margin: 0; }

body { font-size: 5em; }

.arimo-alef { font-family: 'AlefArimo'; }

Static fonts

Hello World שלום עולם

Basically, we're just »Frankensteining« – so mixing @font-face rules coming from different query results to a get a customized font-loading context. In the above example I renamed the new font-family property reference to AlefArimo for the sake of illustration – you could use any name you want.

Language based font loading overhead?

Let's say you page is mostly English – for instance for an event site.

There is a good chance the browser rarely has to load e.g the font-file required for rendering latin-extended or the Vietnamese subset ranges.

But there is also a great chance a »non-latin« string will pop up – for instance a name from a Polish, Hungarian or Vietnamese director/artist.
The browser needs to load the required subsets – if available (or use a local fallback).

However, all modern browsers are actually pretty smart (or »lazy«) detecting the required font file assets.
So you may ditch provided certain ranges for the sake of loading times (as you're reducing the overall CSS that has to be loaded and parsed) but leaving unused subset rules will most likely not significantly impact your rending times.

2026: Browser inconsistencies?

In your case you want to mix »Arimo« with »Alef« where the latter is only available as a static font.

Unfortunately, Chromium/Blink based browsers seem to struggle with a mix of static and variable fonts mapped to a font-family – while it works flawlessly in Firefox.

Firefox
Firefox/Gecko

Chromium
Chromium/Blink: Latin is ignored

Example Snippet

/ latin – map to Alef (only static) /
@font-face {
  font-family: 'AlefArimo';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/alef/v24/FeVfS0NQpLYgnjVRCg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/ hebrew – map to arimo / @font-face { font-family: 'AlefArimo'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/arimo/v36/P5sfzZCDf9T3cV7NCUECyoxNk37cxcAhrBZQI.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

/ Variable fonts /

/ latin – map to Alef (only static) / @font-face { font-family: 'AlefArimoVF'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/alef/v24/FeVfS0NQpLYgnjVRCg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/ hebrew - – map to arimo Varariable Font/ @font-face { font-family: 'AlefArimoVF'; font-style: normal; font-weight: 400 700; src: url(https://fonts.gstatic.com/s/arimo/v36/P5sMzZCDf9T10bxCF8jA.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

h3{ font-size:1rem; margin: 0; }

p{ margin:0; }

span{ display:block; }

body{ font-size:5em; }

.arimo-alef{ font-family: 'AlefArimo'; }

.arimo-alef-vf{ font-family: 'AlefArimoVF'; }

Static fonts

Hello World שלום עולם

Variable fonts

Hello World שלום עולם

Language markup semantics mandatory?

As mentioned in comments – separating different languages via suitable markup attributes is still highly recommended.

  • better add lang attribution to your HTML. This helps assistive technologies like screen readers to detect the content's language
  • mixing writing systems with different writing directions – Left-to-right vs Right-to-Left – means an extra challenge for the shaping and rendering.

While the aforementioned aspects may not necessarily break anything severely, omitting proper language attribution may introduce other undesired rendering issues such as incorrect contextual ligature handling – which is in many »Eastern« writing systems way more important than in »Western« ones (where it is rather a decorative typographical eye-candy not harming legibility when missing).

As always: check your network tab in dev tools to see if all files are loaded (or not loaded) as desired.