/Google-Font-Tester

An app to help you quickly test Google fonts against various sizes and colors.

Primary LanguageJavaScript

Google Fonts Tester

Deployed Site:

https://sherinsam-google-fonts-tester.netlify.com/

Purpose:

To give you quick glimpse on how various Google fonts look with different colors and font sizes. A faster alternative to checking the same in Google fonts website.

Instructions:

  1. Select the required font size for the display text.
  2. Select the required Google font from the dropdown.
  3. Move mouse over the text to see it getting displayed in different colors. Color name and hex code will be displayed on the top.

Design Features

  1. Uses CSS variables.
  2. Uses Google Fonts API

Links that helped

  1. https://stackoverflow.com/questions/22445760/how-to-change-css-href-using-javascript
  2. https://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
  3. http://chir.ag/projects/ntc/ntc.js

Future Reference

https://github.com/typekit/webfontloader

Future Enhancements

  1. Incorporate styles such as Italics and Bold.