Как использовать шрифты Google в приложении для машинописи с JSS?

Question

Как мне включить Google шрифты , чтобы я мог использовать их в своем JSS?

const styles = ({palette, typography}: Theme) => 
  createStyles({
    time: {
      flexBasis: '10%',
      flexShrink: 0,
      fontSize: typography.pxToRem(20)
    },
    guestname: {
      flexBasis: '20%',
      flexShrink: 0,
      fontSize: typography.pxToRem(20),
    }
})

Answer 1

Go на fonts.google.com, "выберите нужный шрифт". По окончании перейдите на вкладку @import и скопируйте только код @import:

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

вставьте его в файл CSS, например, index.css, затем сохраните.

В вашем JSS, чтобы использовать импортированный шрифт, выполните:

const styles = ({palette, typography}: Theme) => 
  createStyles({
    time: {
      flexBasis: '10%',
      flexShrink: 0,
      fontFamily: "'Montserrat', sans-serif", // <-- FONT IS USED HERE
      fontSize: typography.pxToRem(20)
    },
    guestname: {
      flexBasis: '20%',
      flexShrink: 0,
      fontSize: typography.pxToRem(20),
    }
})

Answer 2

Google шрифты с JSS

Добавьте в свой файл css, т. Е. Приложение. css, стиль. css

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

Пожалуйста, измените URL своего шрифта, который вы хочу использовать, иначе работает нормально

и использовать это как:

{
  font-family: 'Josefin Sans', cursive;
}