0

I am trying to use a google font in my component, and I made a separate sheet for that component(which is a page) so now the font is not working although I implemented the following steps:

  1. imported the link from here:https://fonts.google.com/specimen/Great+Vibes

and put it in the head of the html file mainly in the react project

and the component has a separate sheet (css sheet) which is linked successfully too and all styles are working

what else could be missing, I tried the steps in here:How to use Google fonts in React.js?

and it still didn't work

maii
  • 49
  • 6

2 Answers2

0

Try implementing the font into css directly like:

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

And define css property on selector you want to use like:

font-family: 'Great Vibes', cursive;
Haris Vreto
  • 11
  • 2
0

Did you paste google fonts link in the tag of your public/index.html ? I think this blog should help you.

For me, to be sure to have fonts in my app, I choose the @font-face CSS rule by downloading fonts and put it in src/fonts and use @font-face in your src/index.css file or src/App.css file.

Florent Augier
  • 1