Change Ubuntu font name to 'sans-serif'

This allows us to skip explicitly setting the font name for our default font

Author: WillsonHaw

.changeset/odd-beers-wear.md

@@ -0,0 +1,9 @@
+---
+"@plexinc/react-native-lightning-example": patch
+"@plexinc/react-lightning-components": patch
+"@plexinc/react-native-lightning": patch
+"@plexinc/react-lightning-example": patch
+"@plexinc/react-lightning-storybook": patch
+---
+
+Changed font name from Ubuntu to `sans-serif`

apps/react-lightning-example/src/components/AnimatedImage.tsx

@@ -41,9 +41,7 @@ const AnimatedImage = () => {
         style={{ width: 200, height: 300, borderRadius: 8 }}
       />
 
-      <lng-text style={{ fontFamily: 'Ubuntu', y: 300 }}>
-        Hello Darkness My Old Frnd
-      </lng-text>
+      <lng-text style={{ y: 300 }}>Hello Darkness My Old Frnd</lng-text>
     </lng-view>
   );
 };

apps/react-lightning-example/src/components/Button.tsx

@@ -17,7 +17,6 @@ const containerStyles = {
 };
 
 const textStyle = {
-  fontFamily: 'Ubuntu',
   fontSize: 32,
   lineHeight: containerStyles.height,
   textAlign: 'center' as const,

apps/react-lightning-example/src/components/HubItem.tsx

@@ -29,7 +29,6 @@ export const HubItem = ({ metadata, style }: Props) => {
 
       <lng-text
         style={{
-          fontFamily: 'Ubuntu',
           fontSize: 25,
           lineHeight: 30,
           maxWidth: 250,

apps/react-lightning-example/src/components/HubRow.tsx

@@ -15,17 +15,15 @@ export const HubRow = (props: Props) => {
   if (isLoading) {
     return (
       <lng-view style={style}>
-        <lng-text style={{ fontFamily: 'Ubuntu' }}>Loading...</lng-text>
+        <lng-text>Loading...</lng-text>
       </lng-view>
     );
   }
 
   if (!data || error) {
     return (
       <lng-view style={style}>
-        <lng-text style={{ fontFamily: 'Ubuntu' }}>
-          There was an error loading the hub
-        </lng-text>
+        <lng-text>There was an error loading the hub</lng-text>
       </lng-view>
     );
   }
@@ -34,7 +32,6 @@ export const HubRow = (props: Props) => {
     <Column {...rest} style={style} focusable>
       <lng-text
         style={{
-          fontFamily: 'Ubuntu',
           fontSize: 40,
           lineHeight: 50,
           marginBottom: 20,

apps/react-lightning-example/src/index.tsx

@@ -61,14 +61,14 @@ const router = createBrowserRouter([
 const options: RenderOptions = {
   fonts: (stage) => [
     new SdfTrFontFace('msdf', {
-      fontFamily: 'Ubuntu',
+      fontFamily: 'sans-serif',
       descriptors: {},
       atlasUrl: '/fonts/Ubuntu-Regular.msdf.png',
       atlasDataUrl: '/fonts/Ubuntu-Regular.msdf.json',
       stage,
     }),
     new SdfTrFontFace('msdf', {
-      fontFamily: 'Ubuntu',
+      fontFamily: 'sans-serif',
       descriptors: {
         weight: 'bold',
       },

apps/react-lightning-example/src/pages/AnimationPage.tsx

@@ -16,9 +16,7 @@ export const AnimationPage = () => {
   return (
     <>
       <Column focusable style={{ gap: 20, zIndex: 10 }}>
-        <lng-text
-          style={{ fontFamily: 'Ubuntu', color: 0xffffffff, fontSize: 50 }}
-        >
+        <lng-text style={{ color: 0xffffffff, fontSize: 50 }}>
           Poster Count: {numPosters}
         </lng-text>
         <Column focusable style={{ width: 200, gap: 10 }}>

apps/react-lightning-example/src/pages/BrowsePage.tsx

@@ -15,15 +15,11 @@ export const BrowsePage = () => {
   }, []);
 
   if (isLoading) {
-    return <lng-text style={{ fontFamily: 'Ubuntu' }}>Loading...</lng-text>;
+    return <lng-text>Loading...</lng-text>;
   }
 
   if (!data || error) {
-    return (
-      <lng-text style={{ fontFamily: 'Ubuntu' }}>
-        There was an error loading the data
-      </lng-text>
-    );
+    return <lng-text>There was an error loading the data</lng-text>;
   }
 
   return (

apps/react-lightning-example/src/pages/Page60.tsx

@@ -19,7 +19,6 @@ export const Question = ({ text, w }: { text: string; w?: number }) => {
     >
       <lng-text
         style={{
-          fontFamily: 'Ubuntu',
           fontSize: 48,
           maxLines: 3,
           textAlign: 'center' as const,

apps/react-lightning-example/src/pages/PosterPage.tsx

@@ -22,7 +22,6 @@ export const PosterPage = () => {
         <Button>Beep</Button>
         <lng-text
           style={{
-            fontFamily: 'Ubuntu',
             fontSize: 40,
             lineHeight: 50,
             marginLeft: 20,