Integrate and style fonts in React.js

Styling Fonts

Here we’re briefly going to go through some of the basics of fonts. There are several attributes to styling CSS fonts. Color, font-size, font-weight, font-family, line-height, font-variant, font-stretch. We can use any combination of these attributes to style the font to get the desired look we intended.

Example of some font rules.
The shorthand version of the same font styling seen above.
Result of applied font styling.

Adding Third-Party fonts to your Website

The most common way of adding third-part fonts to a website is to paste a link to a Content Delivery Network(CDN) in the index.html. This can be done by visiting a font styles website to get the link to the CDN, some websites may require the user to have an account before accessing the fonts. For most websites, the majority of the fonts are free, the rest of the fonts may need to be paid before they can be accessed.

Example of inserting a Font Awesome icon in a component using the class name.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Samuel Jegede

Samuel Jegede

Learning programming through practice and experimentation. Hope the journey continues to be fruitful.