Hacker News Reader

Comment by rudolph9 | Hacker News Reader

I wish sites would stop forcing overriding the user default font or a least render nicely with their custom font override. I use the [OpenDyslexic][1] typeface which really helps but I’d say about 50% of sites I visit have custom fonts and css rules dependent on their custom font.

This is particularly frustrating when viewing GCP or AWS support docs. I get the lack of accessibility on marketing oriented sites but support docs for major could providers should render coherently with an alternative font!

[https://www.opendyslexic.org/]: 1

View on HN

This sounds like a problem a simple extension would trivially solve, I might write one up and publish it later today when I have some free time. I’ll edit this comment when I do.

Edit: Should've googled first, there seems to be plenty of extensions that solve exactly this issue.

What exact issue does it solve?

Here is a screenshot of what it looks like with the OpenDyslexic typeface https://gist.github.com/rudolph9/e4e86fee61cccd722f6b56eb841...

Actually now that I look at it again it's mostly the icons that aren't rendering nicely. I've got OpenDyslexic installed in the OS and then set as the font in firefox setting but for what ever reason "up arrow", "down arrow", etc are rendering at text instead of icons. Any tips to fix this?

Hi, sorry I missed this - I seemed to misunderstand the question. There's a simple fix that I guess I might now make an extension either today or tomorrow depending when I have free time.

Here's how you could do it on your own, this is for the google cloud docs reference https://cloud.google.com/compute/docs/apis.

Note you have to allow pages to set their own fonts in firefox if you use this option

0. Open up your console in dev-tools (F12).

1. Load Jquery (Give it a second, let the script load)

  var jq = document.createElement('script');
  jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
  document.getElementsByTagName('head')[0].appendChild(jq);

2. See all the font-families the page is using

  fontSets = new Set();
  $('*').each( function() {
    fontSets.add( $(this).css("font-family"))
  });
  console.log(fontSets)

for google cloud docs this reveals:

  Set(7) [ 
    "Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif", 
    "\"Material Icons\"", 
    "Google Sans, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif", 
    "Roboto, RobotoDraft, Arial, sans-serif", 
    "Roboto, RobotoDraft, Helvetica, Arial, sans-serif", 
    "Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif", 
    "Material Icons"]

3. Make an educated guess, I guess its probably Material Icons that OpenDyslexic is messing up, so lets update all the font-families that don't contain Material Icons

  $('*').each( function() {
    if ( $(this).css("font-family").indexOf("Material Icons") === -1)
      $(this).css("font-family",`OpenDyslexic, ${$(this).css("font-family")}`);
  });

Reply on news.ycombinator.com