Improve fonts and remove "family" prop

src/components/ui/text.tsx

@@ -45,11 +45,6 @@ const transformProperties = {
   uppercase: 'uppercase',
 };
 
-const families = {
-  sans: 'font-sans',
-  mono: 'font-mono',
-};
-
 export type Sizes = keyof typeof sizes
 type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div' | 'blockquote'
 type Directions = 'ltr' | 'rtl'
@@ -63,8 +58,6 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
   className?: string;
   /** Text direction. */
   direction?: Directions;
-  /** Typeface of the text. */
-  family?: keyof typeof families;
   /** The "for" attribute specifies which form element a label is bound to. */
   htmlFor?: string;
   /** Font size of the text. */
@@ -92,7 +85,6 @@ const Text = forwardRef<any, IText>(
       align,
       className,
       direction,
-      family = 'sans',
       size = 'md',
       tag = 'p',
       theme = 'default',
@@ -122,7 +114,6 @@ const Text = forwardRef<any, IText>(
           [themes[theme]]: true,
           [weights[weight]]: true,
           [trackingSizes[tracking]]: true,
-          [families[family]]: true,
           [alignmentClass]: typeof align !== 'undefined',
           [transformProperties[transform]]: typeof transform !== 'undefined',
         }, className)}

src/features/developers/developers-challenge.tsx

@@ -56,7 +56,7 @@ const DevelopersChallenge = () => {
           {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Text>
 
-        <Text tag='pre' family='mono' theme='muted'>
+        <Text tag='pre' className='font-mono' theme='muted'>
           {challenge}
         </Text>
 

src/init/soapbox-head.tsx

@@ -29,6 +29,8 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
     'no-reduce-motion': !reduceMotion,
     'underline-links': underlineLinks,
     'demetricator': demetricator,
+    'font-arabic': ['ar', 'fa'].includes(locale),
+    'font-javanese': locale === 'jv',
   });
 
   useEffect(() => {
@@ -48,10 +50,6 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
         {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         {['dark', 'black'].includes(theme) && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
         {/* eslint-disable formatjs/no-literal-string-in-jsx */}
-        <style type='text/css'>{`
-        html[lang='ar'] *, html[lang='fa'] * { font-family: 'Vazirmatn'; }
-        html[lang='jv'] * { font-family: 'Noto Sans Javanese'; }
-        `}</style>
         {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         <meta name='theme-color' content={soapboxConfig.brandColor} />
       </Helmet>

tailwind.config.ts

@@ -27,6 +27,12 @@ const config: Config = {
         base: '0.9375rem',
       },
       fontFamily: {
+        arabic: [
+          'Vazirmatn',
+        ],
+        javanese: [
+          'Noto Sans Javanese',
+        ],
         sans: [
           'Inter',
           'ui-sans-serif',