Changer la police d'écriture à l'aide d'un bouton

Bonjour,

Oui tu peux utiliser une fonction sur un évenement onclick pour venir changer le style d'un élément ou du document entier

document.body.style.fontFamily = "courier"

// ou pour sélectionner un élément particulier
document.querySelector('.ta-classe')

Bonjour,
Merci pour la réponse, malheureusement ça ne fonctionne pas, je ne comprends pas pourquoi
Peut-être est-ce parce que j'ai paramétré la police d'écriture Tongari en CSS et qu'il y a un conflit quelque part ?

J'ai également essayé :

document.getElementsByTagName("p")

Sans succès non plus, en écrivant de cette manière :

document.getElementsByTagName('p').style.fontfamily = 'OpenDyslexic'

Voici mon CSS :

@font-face {
  font-family: 'Tongari';
  src: url('https://static1.squarespace.com/static/5d6ffee77121db00017382cf/t/5fadb1f5dd1d4d0520e6013f/1605218805377/tongari-regular.woff')
};

h1, h2, p {
     font-family: 'Tongari';
     color: white;
}

Je précise que j'utilise squaspace
J'ai bien intégré et défini la police OpenDyslexic comme suit :

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://static1.squarespace.com/static/5d6ffee77121db00017382cf/t/63642c053e07f53779e987b8/1667509253648/OpenDyslexic-Regular.otf')
};

Et concernant le bouton en lui-même j'ai utilisé l'évènement onclick comme ceci :

onclick="document.getElementsByTagName('p').style.fontfamily = 'OpenDyslexic'"

Oh génial ! Ça marche très bien, merci beaucoup

J'aimerais aller un peu plus loin, est-il possible, de cliquer une nouvelle fois pour revenir à la police d'origine ?
Peut-être qu'il faut écrire une fonction pour cela ?

J'ai pour l'instant défini onclick comme-ci : (ID étant AdaptFont)

onclick="document.querySelector('body').style.fontFamily = 'OpenDyslexic' ;
document.getElementById('AdaptFont').innerHTML = 'Lire avec Tongari' ;
document.getElementById('AdaptFont').style.fontFamily = 'Tongari'"

Je me demandais s'il est possible d'ajouter quelque chose pour réinitialiser le bouton, une sorte de "click again" ou de "unclick"

Est-il possible de rajouter de la "temporalité" dans onclick ? Est-ce que cette ligne suivante pourrait réinitialiser l'évènement ?

document.getElementById('AdaptFont').onclick = null

J'ai tenté une fonction mais sans succès, je ne suis pas à l'aise, je ne sais pas trop comment les paramétrer cependant j'ai tenté ceci, sans succès, l'erreur qui m'est renvoyée est "script désactivé" :

<script type="text/javascript">
      function FonctionFont('AdaptFont') {
  if (document.querySelector('body').style.fontFamily = 'Tongari') {
    document.querySelector('body').style.fontFamily = 'OpenDyslexic' ; document.getElementById('AdaptFont').innerHTML = 'Lire avec Tongari' ; document.getElementById('AdaptFont').style.fontFamily = 'Tongari';
  } else {
    document.querySelector('body').style.fontFamily = 'Tongari' ; document.getElementById('AdaptFont').innerHTML = 'Lire avec OpenDyslexic' ; document.getElementById('AdaptFont').style.fontFamily = 'OpenDyslexic';
  }
}
</script>

En ayant paramétré l'évènement onclick comme ceci :

onclick="FonctionFont('AdaptFont')"

Merci beaucoup, ça fonctionne, tout est ok ! Génial
J'ai utilisé la bascule avec onclick=toggle()

Dans le if existe-t-il une différence entre == et === ? Grossièrement c'est la même chose ?
Ok, je comprends le paramètre non utilisé dans la fonction, merci pour toutes ces précisions et le temps qui m'a été consacré :)

Merci pour toutes ces précisions, c'est très apprécié