Set font-family to specific symbols in CSS

Question

On my website i use non standard cyrillic font. It looks well but it have problems with some special symbols, for example - quotes (for some reason opening and ending quote look different).

I would like to set font-family for specific symbols using CSS. Is it possible?

Answer 1

You can manage this using a unicode range @font-face rule

MDN Reference

I'm unsure as to how well this demo will work in a Snippet as it will depend on you have the designated font installed. However, in general, it's something like this:

@font-face {

  font-family: 'Algerian';
  src: local('Algerian');
  unicode-range: U+022-026;

}

div {
  font-size: 4em;
  font-family: Algerian, sans-serif;

}

div {
  text-align: center;

}

p {
  font-size: 72px;

}

<div>
  <p>" Lorem & Ipsum "</p>
</div>

In this instance I've applied the rule to open & closed quotes and the ampersand.

Support: CanIUse.com

For Firefox though:

Support can be enabled in Firefox using the layout.css.unicode-range.enabled flag