Using Unicode-range to assign fonts to foreign language text

  • I have been struggling to find a way to apply particular fonts to particular languages. I frequently have occasion to have a word or phrase from Greek, Hebrew, Arabic, or Russian in my text and would like to be able to style the text with particular fonts.

    One solution has been to create CSS classes and edit the HTML using a <span class="greek"> tag, but depending on the text, this can be a labor-intensive process.

    I have not found a way to assign a class to a snippet of text with the Gutenberg editor (there does appear to be a way to do this with the Classic editor, but switching back and forth between editors is no more timesaving than editing the HTML in the first place).

    After a fair amount of online research, I have tried to use CSS to assign particular fonts to ranges of unicode as follows:

    /* Greek */
@font-face {
  font-family: 'Alegreya', serif;
  font-size: 20px;
  line-height: 2;
  unicode-range: U+0370-03FF;
}

    But thus far, I have not had any success. As you can see on the page referenced above, there are two paragraphs toward the bottom, one using the span tags and the CSS classes, the other relying on the unicode-range.

    Changing themes does not seem to help, neither does indicating font sources as local or via URL in the CSS. Additionally, all the referenced fonts are preloaded using Google Typography. Any help figuring out what I’m doing wrong would be greatly appreciated.

    • This topic was modified 4 years, 7 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey, I learned something new on this! Thanks!
    I think when you use the unicode-range, that font family must be in the font stack. When I looked at your page in the Inspector, the paragraph supposedly using the unicode, isn’t. It has this font stack "Crimson Text", "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, Times, serif and those aren’t the ones that you have put the unicode ranges on. I’m not sure how to put unicode ranges on Google Fonts, although it might be as simple as having another @font-face rule with the same name, to override (or add to) the one from Google.

    Thread Starter Mark Schaefer

    (@revschaef)

    Thank you, Joy. I’ll take a look and see what I can figure out.

    I feel like I’ve spent a couple of weeks tweaking the CSS without any discernible effect. The only thing that makes sense is that somewhere in all that code is something that is overriding my options. Thanks for pointing me in this direction.

    Thread Starter Mark Schaefer

    (@revschaef)

    @joyously

    Thank you for your help earlier. I just wanted to follow up. I did indeed change that element and it had no effect. There is clearly something in the theme that is interfering with this CSS and preventing it from working, but I’ve been unable to figure it out.

    Once, while using a child-theme, it briefly worked, but only when the rest of the site’s CSS was temporarily removed.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using Unicode-range to assign fonts to foreign language text’ is closed to new replies.