0

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.

1 Answer 1

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;
}
6
  • Thank you for the suggestion. It still isn't working for me. Oct 13, 2016 at 7:32
  • On the Google Font page, we can see that the arrow is not included in the font : fonts.google.com/specimen/Alegreya However, it is when I download it on my OS and you tell me that you have it too ? How did you include it in the 'enqueue_font' function ? Oct 13, 2016 at 7:34
  • I used the exact same enqueue as you did except for the &subset=latin-ext part. Maybe try without that.
    – cowgill
    Oct 14, 2016 at 0:19
  • That is how I did the first time, it was exactly the same... Have you installed the font on your serveur before ? Oct 14, 2016 at 5:53
  • @GrégoireLlorca not that I remember. It's on my local machine.
    – cowgill
    Oct 14, 2016 at 7:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.