Question 165750 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can WordPress blogs add selectable dyslexic font?

Just something I’m looking at right now – I’ve recently started a blog & something I’d like to have is the option for a user to select a dyslexic font that would override the current font on the site.

Does anyone know if there are any plugins that would be suitable for this? Or if it’s possible through coding? I haven’t looked into the coding side yet – rather focusing on the plugin side, but nothing has been coming up so far.

Tags:

2

Answers


  1. 0

    There is also https://dyslexiefont.com/en/typeface/ It has font packs, and a chrome extension that you might find works well for your child.

    Login or Signup to reply.
  2. 0

    If you want a blog user to be able to toggle on/off a dyslexia-focused font like opendyslexic it’s certainly possible. You could have a body class or main container class to change everything on the page. You could have a button that would update the CSS to toggle the font, but you’d also need to set a cookie for the user so that on page load a function could check for the cookie and set the user’s desired font.

    FYI, this snippet will not work if you run it since you can’t set cookies in a sandboxed environment like snippets, but it should give you and idea of what you would need to do.

    var Cookie = {
  set: function(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
      expires = "; expires=" + date.toGMTString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
  },
  get: function(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == " ") c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  },
  erase: function(name) {
    Cookie.set(name, "", -1);
  }
};

function loadFont() {
  let cookie = Cookie.get("dyslexic");
  if (cookie) {
    document.getElementById("content").classList.add("dyslexic");
  }
}

document.getElementById("fontToggle").addEventListener("click", function() {
  // Toggle font class
  document.getElementById("content").classList.toggle("dyslexic");

  // Set/erase cookie
  if (Cookie.get("dyslexic")) {
    Cookie.erase("dyslexic");
  } else {
    Cookie.set("dyslexic", true, 365);
  }
});
    body {
  margin: 0;
  padding: 0;
  position: relative;
  overflow-y: hidden;
}

#nav {
  height: 40px;
  background-color: #0355a8;
}

#content {
  width: 80%;
  margin: 0 auto;
  font-family: "Arial", sans-serif;
}

#content.dyslexic h1,
#content.dyslexic ul,
#content.dyslexic li,
#content.dyslexic p {
  font-family: "Open-Dyslexic", sans-serif;
}

#fontToggle {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: indianred;
  color: white;
  font-family: "Arial", sans-serif;
  padding: 10px;
  border-radius: 5px 0 0 5px;
  text-align: center;
}
    <body onload="loadFont()">
  <div id="nav"></div>
  <div id="content">
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex ipsum, consequat vitae pretium eu, lacinia vitae sem. Sed ante metus, euismod a tincidunt sit amet, facilisis ac purus. Aliquam interdum pulvinar eleifend. Donec maximus libero in diam
      ornare, nec pretium ante iaculis. Ut lacinia nibh vitae lectus elementum, nec eleifend magna posuere. Maecenas vulputate convallis urna a feugiat. Nullam aliquam hendrerit commodo.</p>
    <p>Aenean rutrum odio sed pulvinar tincidunt. Vivamus quis felis mollis, placerat nunc ultricies, vestibulum neque. In hac habitasse platea dictumst. Vivamus nisi ipsum, porttitor vitae justo eget, vehicula rhoncus dolor. Morbi malesuada metus quis nisi
      vulputate rutrum. Nulla vitae mi sed libero rutrum imperdiet. Fusce vitae sem quis massa facilisis dictum.</p>
    <p>Duis nec efficitur metus. Nulla sollicitudin lacinia est non ultrices. Vestibulum auctor, est ac dignissim commodo, nisi nulla convallis metus, nec elementum arcu tortor sed turpis. Mauris pellentesque cursus lorem ut cursus. Vestibulum egestas pulvinar
      fermentum. Aliquam sagittis imperdiet lorem in vestibulum. Phasellus non arcu interdum, dictum mauris eu, luctus ipsum. Cras bibendum aliquet urna, nec laoreet velit eleifend sit amet. In sed metus tempor, lacinia purus ut, aliquam dolor. Phasellus
      turpis mauris, convallis vitae porttitor et, elementum vel nunc. Aliquam vitae ex consectetur, egestas massa euismod, rutrum dolor.</p>
    <p>Sed iaculis leo vitae quam posuere porttitor. Suspendisse placerat viverra dui egestas varius. Aenean sed turpis ornare, finibus dolor in, placerat dolor. Sed mattis hendrerit mi, sed vulputate justo luctus sed. Vivamus venenatis, velit vel facilisis
      pulvinar, nibh lorem fringilla neque, malesuada tincidunt libero felis eget justo. Praesent bibendum consequat arcu, at eleifend nunc interdum ut. Ut aliquam, erat in bibendum eleifend, dui nisi viverra velit, vel tincidunt felis nibh quis ex. Aenean
      at tristique eros. Donec tellus purus, pretium nec fringilla vel, consectetur non quam. Donec ornare urna ut tellus accumsan, id tristique nisi ullamcorper.</p>
    <p>Suspendisse et felis sed quam pretium mattis. Cras suscipit molestie consequat. Sed finibus, augue ac tempor laoreet, metus nisl sodales augue, ut mattis metus felis non justo. Ut a aliquam ipsum, bibendum porta neque. Proin sed finibus erat. Nam
      at euismod urna. Mauris sed cursus quam, eu imperdiet orci. Proin sagittis molestie dui, a congue velit interdum aliquam. Nulla laoreet, est nec efficitur cursus, metus lectus facilisis libero, vel varius velit justo a tortor. Pellentesque feugiat
      dolor sed nulla consectetur luctus.</p>
  </div>
  <div id="fontToggle">Toggle</br>Font</div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search