Using Google Fonts to Style Your Javascript App
So you just made your javascript app that has all the cool functionalities you wanted in it, now what? It is time for you to do some styling on your app. It would be nice if you are a CSS master and can make your app look super fancy but sadly, not everyone has that in them. It is very sad to see some genuinely brilliant apps get little or no attention because it had not styling done. Even if you don’t have much of design sense or CSS skill or time to put into styling, there is a way to make your app look attractive: using the right font.
Take Medium for example. There is not a lot of fancy color graphics and color scheme but the simplicity it offers makes it attractive. Fonts that they use look traditional and modern at the same time(I know that sounds weird but it’s true!) and because of these font styles, the website looks well organized and interesting even without much graphics other than the picture that blog writers choose for each of their posts. So how should you choose which fonts to use?
The advise I would give is to think about the purpose and functionality of the app that you are making and decide what tone you want to set in your app. For example, if you made a children’s game app then you can probably use some playful fonts. If it is a e-commerce app then your fonts should look clean and easy to read. If you don’t have any idea as to what style of fonts you should use, then take a look at some other apps that are similar to yours and find a style that you think would fit well into the app that you have made.
After you have made some decision on what overall style you are going to go for, head to Google Fonts page and look for something that fits your style. A little advice I want to give here is that don’t spend too much time looking at every font. I know how interesting and good looking they are but you have other things to do too! Give yourself a time limit and quickly choose something that fits your mental image of your app. Applying and changing font is not difficult at all so if the one you choose isn’t perfect, you can always go back and change it to something else. Google Fonts is very simple and convenient to use. It lets you type in a phrase that you want to see as an example so the process of choosing font can be easier. Also one notable feature in Google Fonts is that it shows you popular font pairing choices for the font that you choose. When you are making an app you’ll probably use more than one font so this feature can save you a lot of time.
So now that you have chose which font to use, how do you apply it on your app? I’ll demonstrate how to do it in three simple steps using the New Years Counter I made last week(I’ll change the end date to January 9th of 2021 though).
- On the font page, click ‘Select this style’ and click the icon in the top right corner(the one with plus and three squares)to open up a menu on the right side your window.
2. Select <link> option and copy the second link tag and paste it inside header tag in your html file.
3. Go back to the font page and copy what is under ‘CSS rules to specify families’(in this case: font-family: ‘Londrina Sketch’, cursive;) and paste it in your CSS file where ever you want to use that font on(in this case, we only have body tag).
TADA!
As you can see, using and changing fonts on your Javascript app is simple yet very powerful. So don’t hesitate to explore some fonts to make your app look amazing!
