Adding that fancy font onto your React App
Coming from a background of fashion design and graphic design. Making each product visually appealing was one of my main focus.
In fashion design, I had to think about how I can convey my once creative imaginations through visual elements such as mood boards and sketchbooks. These were the very first artifacts I had to create when developing a collection. So many things were considered — images, colors, fabric swatches, sketching styles, the composition of work, and lastly the font that spoke its brand and personality.
When I moved onto being a graphic designer I realized, even more, the importance of TEXT. Text really speaks so much about the product and its brand. We sometimes think it doesn’t do much but in reality, a small change can speak strongly. It is just as important as the image, content, colors, usage of screen space.
So today I will walk through how you can easily import custom fonts onto your HTML file. To be specific, how to import Google Fonts.
So Google font is a free online font service where you can quickly import that font onto your file.
First, go to https://fonts.google.com/
Second, go through the list of fonts you like. If you like a font you can click on the + icon and that will create a popup with the font family selected.
Third, after you have selected the font, you can see the section Embed Font and you will see a tab of Standard.
<link href=”https://fonts.googleapis.com/css?family=FONTNAME” rel”stylesheet”>
this will be embedded between the <head> </head> of your HTML document.
Fourth, you will create a CSS file then reference the element and add the following CSS rules to specify the font family.
font-family: ‘YOURFONTNAME’, sans-serif; (the second part will vary based on font selection)
the specification will be all provided in google fonts family selected tab.
Then you are done! Just make sure you don’t forget to import the CSS file onto your React Components.
You can go in add more font features such as letter spacing, colors, size and shadows, effects, etc. Now the creativity lies on you!