0

I am using font-feature-settings in CSS to change some fonts into alternative glyphs.

I would like to add to all the letter "w" and "W" on the website the class ".ss03"

Then in CSS I could style it

Is there a way I can do it in JS?

Right now I am doing it manually:

<p> This is a test for te letter <span class="ss03">W</span>

<style\>

.ss03 {
font-feature-settings: "ss03" 1;
}

</style\>
StadtL
  • 1
  • 1

1 Answers1

1

You can do it using JavaScript

<script>
document.addEventListener('DOMContentLoaded', function() {
  const paragraphs = document.getElementsByTagName('p');

  for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs[i];
    const text = paragraph.textContent;

    const replacedText = text.replace(/(W|w)/g, '<span class="ss03">$1</span>');

    paragraph.innerHTML = replacedText;
  }
});
</script>
Alin
  • 211
  • 2
  • 6
  • Thanks for the answer, W and w are displayed correctly with this code. But now all the text is converted into paragraphs and for example bold text, or italic are not displayed anymore. How come? – StadtL Jul 26 '23 at 10:02