JS algorithm in use below

Simple logic

1. Every second “E” use ‘Jyo Display’ font family

2. First and third “o” use “Nineties display” font family

3. First and third “a” in a word longer then 3 letters use ‘Jyo Display’ font family

4. Every third “N” use ‘Jyo Display’ font family

5. Every third “s” use “Nineties display”font family

6. If less then 12 characters use ‘Jyo Display’ font family to change single first “O”, “A” or “e” found

JS logic

document.addEventListener('DOMContentLoaded', function() { const typographyDynamic = document.querySelector('.typography-dynamic'); let text = typographyDynamic.innerText; // Function to add spans around the second "E" in each word function addSpansToText(text) { let words = text.split(' '); let firstWordModified = false; let eCount = 0; let oCount = 0; // Process each word let processedWords = words.map((word, wordIndex) => { // If letter "A" is the first letter within a word that has atleast 3 characters if (word.length >= 3 && word[0].toUpperCase() === 'A') { word = `<span class="typography-variant-1">${word[0]}</span>${word.slice(1)}`; } // Process each character in the word let processedWord = word.split('').map((char, charIndex) => { if (char.toUpperCase() === 'E') { eCount++; // Second "E" occurence (e.g. "... Freedom") if (eCount === 2) { return `<span class="typography-variant-1">${char}</span>`; } // Fourth "O" occurence (e.g. "... Nicotine") if (eCount === 4) { return `<span class="typography-variant-2">${char}</span>`; } console.log(word); console.log(eCount); } if (char.toUpperCase() == "O") { oCount++; // First "O" occurence if (oCount === 1) { return `<span class="typography-variant-2 first-occurence">${char}</span>`; } // Third "O" occurence if (oCount === 3) { return `<span class="typography-variant-2 first-occurence">${char}</span>`; } // Last "O" occurence if (oCount === words.length) { return `<span class="typography-variant-2 first-occurence">${char}</span>`; } console.log("Current Index: ", wordIndex); console.log("Max Index: ", words.length); console.log(oCount); } return char; }).join(''); return processedWord; }); return processedWords.join(' '); } // Set the modified text back to the typographyDynamic element typographyDynamic.innerHTML = addSpansToText(text); });