Using Unicode Half-Stars Symbols in Ratings

When I started collecting reviews in one section of my website, I decided to stick with the goals I had here on the Tech Tips section: Keep the pages small, avoid loading scripts or extra images where styles or font symbols would do. So I kept using emoji for category icons, and used the outlined and filled star symbols (☆★) for ratings. They’ve been in Unicode forever, so they’re supported almost everywhere.

Halfway There

Every once in a while, I really want to rate something between a whole number of stars. I let it round down for a while until I went looking to see if there were half-filled star symbols. And there are! Half-stars and half-filled stars (in both directions) were proposed in 2016 and added to Unicode 11 in 2018. You can see them here:

⯨⯩⯪⯫

…or maybe you can’t, because even after eight years, font support for them is still spotty.

As of March 2026:

Windows 11 shows the symbols.
Linux distros might, depending on what fonts are installed. Modern distros at least have fonts that support these symbols, in packages like fonts-noto-core (Debian) or google-noto-sans-symbols-2-fonts (Fedora), but whether they’re installed by default seems to vary.
Windows 10, macOS/iOS 26 and Android don’t, even though they include newer emoji than Unicode 11.

So if you’re trying to use these on a web page, it’s really hit and miss whether your readers will be able to see the half-star symbols or not.

The good news is, you can embed a font on your page (or app) that does support the missing symbols! Noto Sans Symbols 2 contains the full set, and can be used freely. Embedding that font and using it for the ratings solves the problem.

⯨⯩⯪⯫

That said, it is an extra 200 KB or so, which is a bit overkill for adding one very simple bit of line art. (See the Alternatives section below.)

Adding Font Support

The simplest thing to do, if you’re not worried about Google potentially tracking visitors to your site (see self-hosting below for an alternative), is just embed the font from Google by putting this in the <head> section of your page:

<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap" rel="stylesheet">

Then in your stylesheet, write something like this:

.stars {font-family: "Noto Sans Symbols 2"}

And you can write your star ratings like this:

<span class="stars">★★★⯪☆</span>

★★★⯪☆

I actually go a bit further on mine for accessibility and microformats:

<abbr class="stars p-rating"
  title="3.5 stars out of 5"
  aria-label="3.5 stars out of 5."
  value="3.5">★★★⯪☆</abbr>

★★★⯪☆

HTML Codes

If you’re writing on a system that doesn’t support all the star characters natively, you can use numeric HTML entities. It’ll be just as unreadable as the tofu, but you’ll be able to tell them apart from each other.

★ or ★ ★ Black star
☆ or ☆ ☆ White Star
⯨ or ⯨ ⯨ Left half black star
⯩ or ⯩ ⯩ Right half black star
⯪ or ⯪ ⯪ Star with left half black
⯫ or ⯫ ⯫ Star with right half black

Self-Hosting the Font

The Google Fonts Privacy Policy states that they don’t do any tracking on the font requests and keep them completely separate from any account-related traffic. But if you want to be absolutely certain, or need to comply with regulations like GDPR, you can host your own copy.

They don’t make it easy, though.

Option 1: Download and Convert from TTF

If you download the font from Google Fonts, you get the complete TrueType font, which in this case is about 6 times as big as the WOFF2 font for web embedding. The .zip at the font’s GitHub page also includes smaller versions, closer to 400KB, in the “hinted” and “unhinted” folders. (In this case they’re the same, but for other fonts you’ll probably want the version with hinting.)

You can use an online TrueType to WOFF2 converter, or you can use an offline tool.

The command-line woff2_compress tool is available in Homebrew for macOS and various Linux distributions in the woff2 (Debian, Alpine, Homebrew, etc) or woff2-tools (Fedora) packages.

woff2_compress NotoSansSymbols2-Regular.ttf

Option 2: Find a Pre-Built WOFF2 file

Or you can grab a copy of the WOFF2 file from Google Fonts. The simplest way is to open their font stylesheet (the one in the third <link> above) directly, scroll down to the /* symbols */ section, copy the URL from that, and save the .woff2 file. Preferably giving it a name you can recognize later on.

Embedding Your Copy

You won’t need the entire set of font definitions and Unicode ranges, because you’re using it in narrow circumstances. And you won’t need the <link> elements pointing to Google. Though you may need to keep the <meta charset="UTF-8"> depending on your hosting setup. In any case, you’ll want to add this to your stylesheet:

@font-face {
  font-family: "Noto Sans Symbols 2";
  font-display: swap;
  src: url(/path/to/your/copy/of/NotoSansSymbols2-Regular.woff2);
}

The font-display: swap tells browsers to keep rendering the page if it takes a while to load the font, and swap it in when it’s ready.

On larger pages especially, you may also want to preload the font so the browser will start downloading it as soon as it can, instead of waiting until it’s downloaded and parsed the stylesheet.

Alternatives

Use images instead of font symbols. (PNGs or SVGs would be tiny.)
Use an icon font like Font Awesome that provides its own symbols. (Download size is comparable to embedding Noto Sans Symbol 2, but you can also use their icons as SVGs, which can be a lot smaller if you only need a handful.)
Create a subset of the font (Either Noto or FontAwesome) that leaves out everything but the symbols needed.
Embed the font, but only on the individual pages that need it. (That’s what I’ve done for this page.)
Use a more widely-supported symbol like ½ instead. (This is what I initially did on my reviews.)
Use a the fraction symbol, and then use JavaScript to check whether the half-star is supported in the current font, and swap it in if it’s available. (Or the other way around, but this is more backward compatible.)

Then again, ~200 KB is a fraction of the average page size these days. More than a drop in the bucket, but hardly a dealbreaker. Even if it is 10 times the size this page would be without it.