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

Answer 2

If you want to change your symbols to a new font then you'll have to wrap them in a tag and assign a class...

in your CSS add a class for the font

.symbol {
  font-family: Arial;
}

Then in your HTML you will need to use this class on your symbols...

    <p>Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on? 
<i class="symbol">"<i>I will break this, I will BREAK THIS.<i class="symbol">"<i> </p>

If the problem is only for quotes?

You could set the :before and :after pseudo for a <blockquote></blockquote> , which could be set to a icon font. Perhaps fontawesome?

 blockquote { position: relative; padding: 1em 2em; } blockquote:before, blockquote:after { position: absolute; font-family: FontAwesome; } blockquote:before { content: "\\f10d"; left: -1em } blockquote:after { content: "\\f10e"; right: -1em } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="stylesheet"> <blockquote>Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on? I will break this, I will BREAK THIS. Damn druggie idiot. Is this what you've been doing the whole time I've been trying to reach you?</blockquote> 

Answer 3

you can use easily like

.custom-font{
 font-family:any
}

and then

<div>hello there <span class='custom-font'>i am custom</span> but i am not</div>