JSFiddle - React, Tailwind, and code Playground

by John Smith

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Get Fonts</title>
</head>
<body>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="./get-fonts.js"></script>
</body>
</html>

JavaScript

axios.get(`https://www.googleapis.com/webfonts/v1/webfonts?sort=alpha&key=AIzaSyDgRT5SVSOV6TpTWV1PePBjnicqnj7h4lw`)
  .then(({ data }) => {
    // get only the fonts that have variants lenghts bigger then 3
    const googleFonts = data.items.filter((item) => item.variants.length >= 3);

    // remove all "italic" words or "numberitalic" from each font variant array
    const filterVariants = googleFonts.map((variantsArray) => {
      const removeItalicVariants = variantsArray.variants.filter((variant) => {
        return variant !== 'italic' && variant.indexOf('italic') === -1;
      });
      return removeItalicVariants;
    });
    
    console.log(filterVariants)

    // check that each font variant array has al least 1 value for light, regular and bold weight
    let getVariantsWithValidation = null;
    if (filterVariants.length > 0) {
      getVariantsWithValidation = filterVariants.filter((variants) => {
        const regularPosition = variants.indexOf('regular');

        const lightWeight = variants ? variants.slice(0, regularPosition) : null;
        const regularWeight = variants ? variants.slice(1, variants.length - 1) : null;
        const boldWeight = variants ? variants.slice(regularPosition + 1, variants.length) : null;

        return lightWeight.length >= 1 && regularWeight.length >= 1 && boldWeight.length >= 1;
      });
    }
    console.log(getVariantsWithValidation);
    console.log('googleFonts', googleFonts);
  })
  .catch((err) => {
    if (!axios.isCancel(err)) {
      console.log('Error ', err.message)
    }
  });