Working With Fonts

Adding fonts

A common approach to introducing fonts when not using React involves adding links to the head section of our page, and then referring to those fonts within the CSS. We’ll follow a similar approach, but do it in a way that works with React and styled-components.

Our process will be to create a new file, fonts.js, and create a styled-components global style that includes all the @font-face commands we need. We then put that component into our top-level App component. The fonts can then be used by specifying their names.

Finding fonts

A good place to find fonts is at the Google Fonts site. It has thousands of fonts, and all of them are served by Google’s Content Distribution Network (CDN), so they load quickly and reliably. On the site, search for a font using the search box and select one using the plus. Then you can look at the font in the bottom tab. In there, there is a link with an href that gives you the URL.