Next.js Discord

Discord Forum

OpenDyslexic font issue

Unanswered
Greater Prairie-chicken posted this in #help-forum
Open in Discord
Greater Prairie-chickenOP
useEffect(() => {
    if (featureStates.dyslexiaFriendly === FeatureState.DyslexiaFriendly) {
      document.documentElement.classList.add('dyslexia-friendly');
    } else {
      document.documentElement.classList.remove('dyslexia-friendly');
    }
  }, [featureStates.dyslexiaFriendly]);


.dyslexia-friendly {
  font-family: 'OpenDyslexic', sans-serif !important;
}


actually it need to be applied everywhere so im using in global.css file im using nextjs with tailwind

26 Replies

Yi Lon Ma
just add this class to body?
or in global.css just do * {font-family: ...}
Greater Prairie-chickenOP
can u tell exact syntax

*.dyslexia-friendly {
  font-family: 'OpenDyslexic', sans-serif !important;
}
put this in global.css
@Yi Lon Ma css * { font-family: 'OpenDyslexic', sans-serif !important; }
Greater Prairie-chickenOP
but yeah i need classname also
thats why
u can check in useeffect above
Yi Lon Ma
.dyslexia-friendly {
  font-family: 'OpenDyslexic', sans-serif !important;
}


<body className="dyslexia-friendly"/>
not working
except this font-family everything is working like font-size, color
try without conditions just set the font for body
Greater Prairie-chickenOP
Greater Prairie-chickenOP
@gin
@Greater Prairie-chicken Click to see attachment
gin
use absolute path
./fonts/OpenDyslexic-Regular.otf
u can put the fonts folder inside src
it will still be optimized
gin
once its loaded and u see the font in network tab, then u can load it however u like
if it still doesn't load, it will be mostly a font overriding your child somewhere in one of your parents, so check if that is not the case
can also be the other way, a child can override the font of the parent, so also check for that
Greater Prairie-chickenOP
 useEffect(() => {
    if (featureStates.dyslexiaFriendly === FeatureState.DyslexiaFriendly) {
      document.documentElement.classList.add(getDyslexicFont.className);
    } else {
      document.documentElement.classList.remove(getDyslexicFont.className);
    }
  }, [featureStates.dyslexiaFriendly]);
Greater Prairie-chickenOP
close this thread issue was fixed