WIP fonts

src/App.web.tsx

@@ -61,6 +61,7 @@ import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {loadVerificationCheckFonts} from '#/components/verification/VerificationCheck'
 
 /**
  * Begin geolocation ASAP
@@ -74,6 +75,7 @@ function InnerApp() {
   const theme = useColorModeTheme()
   const {_} = useLingui()
   const hasCheckedReferrer = useStarterPackEntry()
+  const [verificationChecksFontLoaded] = loadVerificationCheckFonts()
 
   // init
   useEffect(() => {
@@ -103,6 +105,7 @@ function InnerApp() {
 
   // wait for session to resume
   if (!isReady || !hasCheckedReferrer) return null
+  if (!verificationChecksFontLoaded) return null
 
   return (
     <Alf theme={theme}>

src/components/verification/VerificationCheck.tsx

@@ -1,3 +1,6 @@
+import {createIconSet} from '@expo/vector-icons'
+import {useFonts} from 'expo-font'
+
 import {type Props} from '#/components/icons/common'
 import {VerifiedCheck} from '#/components/icons/VerifiedCheck'
 import {VerifierCheck} from '#/components/icons/VerifierCheck'
@@ -10,3 +13,20 @@ export function VerificationCheck({
 }) {
   return verifier ? <VerifierCheck {...rest} /> : <VerifiedCheck {...rest} />
 }
+
+export function loadVerificationCheckFonts() {
+  return useFonts({
+    Verification: require('../../../assets/fonts/verification/Verification.ttf'),
+  })
+}
+
+export const VerificationCheckIcon = createIconSet(
+  {
+    'Verification-verifiedCheck': 59905,
+    'Verification-verifiedCheckGray': 59906,
+    'Verification-verifierCheck': 59907,
+    'Verification-verifierCheckGray': 59908,
+  },
+  'Verification',
+  'Verification.ttf',
+)

src/view/com/util/PostMeta.tsx

@@ -20,7 +20,7 @@ import {WebOnlyInlineLinkText} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
-import {VerificationCheck} from '#/components/verification/VerificationCheck'
+import {VerificationCheck, VerificationCheckIcon} from '#/components/verification/VerificationCheck'
 import {TimeElapsed} from './TimeElapsed'
 import {PreviewableUserAvatar} from './UserAvatar'
 
@@ -100,22 +100,18 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
                   opts.moderation?.ui('displayName'),
                 ),
               )}
-            </WebOnlyInlineLinkText>
-            {verification.showBadge && (
-              <View
-                style={[
-                  a.pl_2xs,
-                  a.self_center,
-                  {
-                    marginTop: platform({web: -1, ios: -1, android: -2}),
-                  },
-                ]}>
-                <VerificationCheck
-                  width={14}
-                  verifier={verification.role === 'verifier'}
+              {verification.showBadge && (
+                <>
+                  {' '}
+                <VerificationCheckIcon
+                  name='Verification-verifiedCheck'
+                  style={{
+                    color: t.palette.primary_500,
+                  }}
                 />
-              </View>
-            )}
+                </>
+              )}
+            </WebOnlyInlineLinkText>
             <WebOnlyInlineLinkText
               numberOfLines={1}
               to={profileLink}