Google fonts and cross-browser Unicode

Question

I'm using a google font ( Source Sans Pro ) in one of my projects. I have a class where on hover ::after I show an arrow. The problem is except from Safari, Chrome and Firefox both showing a different symbol. I mean it is arrow but the default google font is not used in the two browsers (Chrome and Firefox) to render the Unicode (2192) .

See the image below to understand the issue. Is there a way to make them look the same across browsers as it is appearing in Safari?

Answer 1

---

Update 21-04-2017

---

Because its a bit overkill to include a whole library just for one arrow. I update my awnser with a better solution.

Generate the font-icon yourself with somekind of application like https://icomoon.io/app/#/select/

Search for the disired font-icon (s) and download the the generated font . Just copy and paste the font to your hosting and voila.

If you want to keep a clean structure or a clean css file. You can also copy the content of the style.css into your desired css file.

---

Original awnser

---

What about using an font icon? Something like Font Awesome. If so, you have to do this.

include Font Awesome in your header.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

Than make the CSS for the ::after element like this.

.class:after {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
}

.class:hover:after {
    content: "\f178";
}

For detailed info using Font Awesome visit: http://fortawesome.github.io/Font-Awesome/

https://jsfiddle.net/bgamsayq/