Material-ui: How to add roboto font?

Created on 25 Jul 2016 · 2Comments · Source: mui-org/material-ui

I am struggling to add roboto font. I know it sounds simple, I am not from front-end background. The section on font simply takes me to google font site which offers to include the rel link or use @import - how do I do that with react components? Or I am missing something simple?

How to add this font to react components?
What is expected behaviour after I add it successfully? - I can declare <h1> or <p> and they become in such font?

I believe question is relevant here because typography and its usage is under-documented.

Thanks,

Source

ukimpact

👍2

Most helpful comment

The way to include the Roboto font is by doing the following.

Go here. https://www.google.com/fonts#UsePlace:use/Collection:Roboto
Choose the styles you want to include
At the bottom of the page you have the option to either include the css file in your html file, in your css file or using javascript.
Where ever you want to use the Roboto font use this following css font-family: 'Roboto', sans-serif; If you want to use if for the website just copy this css.

html { font-family: 'Roboto', sans-serif; }

If you don't know what you're doing then the easiest way is to use the first option which is to copy the generated <link> tag and paste it in between the <head></head> tags of the html files you are using for the react app.

matthewattanasio on 25 Jul 2016

👍14

All 2 comments

The way to include the Roboto font is by doing the following.

Go here. https://www.google.com/fonts#UsePlace:use/Collection:Roboto
Choose the styles you want to include
At the bottom of the page you have the option to either include the css file in your html file, in your css file or using javascript.
Where ever you want to use the Roboto font use this following css font-family: 'Roboto', sans-serif; If you want to use if for the website just copy this css.

html { font-family: 'Roboto', sans-serif; }

matthewattanasio on 25 Jul 2016

👍14

What if I need to package my app for offline use? Which font styles to use?

I've already asked on Stackoverflow, but got no answer.