Use Google Fonts and unicodes

Question

I use "Alegreya" on my website. Here is my functions.php :

add_action( 'wp_enqueue_scripts', 'enqueue_fonts' );
function enqueue_fonts() {
    wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Alegreya+Sans:300i,400,400i,500,700&subset=latin-ext');
    wp_enqueue_style( 'googleFonts');
}

On my website, the paragraphs and text use Alegreya as expected. However, I'd like to use the right arrow icon on an :after element.

When I download the font on my computer, it is available as a character under the unicode 'u2192' (I check that in Illustrator).

So, in my CSS, I put :

.cta:after{
    content: "\2192";
    color: #fff;
    font-weight: lighter;
}

However, the icon displayed is the "Arial" one, and not the "Alegreya", which is much nicer.

How can I use Google Font unicode characters in my CSS ?

Thank you for your help. Regards.

Answer 1

It works for me. Try setting the font-family within that block as well.

.cta:after{
  content: "\2192";
  color: #fff;
  font-weight: lighter;
  font-family: 'Alegreya', serif;
}