Integrate and style fonts in React.js
Fonts are used in the development of most websites. At some point, we have all experimented with font styles, sizes and colours. Personally, I'll have to do a lot more experimentation before my fonts are any good. Understanding how to install third-party fonts adds even more confusion to our already confusing problem. In this article, we are going to walk through fundamentals of using fonts, in a React.js project.
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.
[For more information about the font styles used above. Click this link → https://developer.mozilla.org/en-US/docs/Web/CSS/font]
CSS quickly gets very messy, there are so many rules in a CSS file to style a page or website, that when something goes wrong. It’s almost impossible to find and correct the code responsible for the bug. It’s best practice to use shorthand in CSS where possible. The CSS font styling below is an example of how using shorthand can be used to write less CSS and still get the style that you want to achieve.
[If you’re interested, follow the link to find other properties of fonts that are not included in the font shorthand. Click this link → https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts]
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.
The CDN’s for fonts are probably developed in a particular country. So an end-user may not be able to access them from another country. The CDN adds additional dependency, which is a risk for any websites that use it. CDN’s are less reliable than having the fonts stored locally. However, because they are not stored locally CDN’s are likely to be faster.
Usually, all that’s needed to use a third party font, is to copy the CDN link from the website and paste it in the index.html as then import the font library into the component file to use the font. Fonts like Google Fonts, Material UI and Font Awesome use class names to insert the font into the element or component.
Third-Party fonts can also be installed by locally installing the font library into the project using npm.
I hope you found this useful. Thanks for reading!!!