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,

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

@@ -121,7 +121,7 @@ AppRegistry.runApplication('plex', {
     driver: 'normal',
     fonts: (stage) => [
       new SdfTrFontFace('msdf', {
-        fontFamily: 'Ubuntu',
+        fontFamily: 'sans-serif',
         descriptors: {
           weight: 'bold',
         },
@@ -130,7 +130,7 @@ AppRegistry.runApplication('plex', {
         stage,
       }),
       new SdfTrFontFace('msdf', {
-        fontFamily: 'Ubuntu',
+        fontFamily: 'sans-serif',
         descriptors: {},
         atlasUrl: '/fonts/Ubuntu-Regular.msdf.png',
         atlasDataUrl: '/fonts/Ubuntu-Regular.msdf.json',

apps/react-native-lightning-example/src/pages/LibraryTest.tsx

@@ -44,7 +44,6 @@ const Poster = focusable<Props, LightningElement>(
           style={{
             opacity: alpha,
             fontSize: 30,
-            fontFamily: 'Ubuntu',
             fontWeight: 'bold',
             textAlign: 'center',
           }}
@@ -55,7 +54,6 @@ const Poster = focusable<Props, LightningElement>(
           style={{
             opacity: alpha,
             fontSize: 20,
-            fontFamily: 'Ubuntu',
             fontWeight: 'normal',
             textAlign: 'center',
           }}
@@ -143,7 +141,6 @@ export const LibraryTest = () => {
         style={{
           zIndex: 99,
           fontSize: 50,
-          fontFamily: 'Ubuntu',
           // @ts-expect-error TODO
           y: 50,
         }}

apps/storybook/public/fonts/metrics/Ubuntu-Bold.metrics.json

@@ -1,7 +1,6 @@
 import { StyledText } from '@plexinc/react-lightning-components';
 import React from 'react';
 import Button from '../../components/Button';
-import { DefaultStoryWidth } from '../../helpers/constants';
 
 const LANGUAGE = {
   EN: 'en',

apps/storybook/src/react-lightning-components/text/StyledText.stories.tsx

@@ -45,7 +45,6 @@ const FPSMonitor = ({ style }: Props) => {
       style={{
         color,
         display: 'flex',
-        fontFamily: 'Ubuntu',
         fontSize: 20,
         mountX: 1,
         position: 'absolute',

packages/react-lightning-components/src/components/FPSMonitor.tsx

@@ -15,7 +15,6 @@ type Part = {
 };
 
 const BASE_STYLE = {
-  fontFamily: 'Ubuntu',
   fontSize: 18,
   lineHeight: 24,
 };

packages/react-lightning-components/src/components/StyledText.tsx

@@ -31,7 +31,7 @@ function getItemCountDefault<T>(data: T[] | null | undefined): number {
 }
 
 const renderAsText = ({ item }: { item: unknown }) => {
-  return <lng-text style={{ fontFamily: 'Ubuntu' }}>{String(item)}</lng-text>;
+  return <lng-text>{String(item)}</lng-text>;
 };
 
 class FlatList<T> extends React.Component<FlatListProps<T>> {

packages/react-native-lightning/src/exports/FlatList.tsx

@@ -15,7 +15,6 @@ export type TextProps = AddMissingProps<ViewProps, RNTextProps> & {
 
 const defaultTextStyle: Partial<LightningTextElementStyle> = {
   // contain: 'width',
-  fontFamily: 'Ubuntu',
   fontWeight: 'normal',
 };
 

packages/react-native-lightning/src/exports/Text.tsx

@@ -5,7 +5,7 @@ type Props = {
   style?: LightningTextElementStyle;
 };
 
-const defaultStyle = { fontFamily: 'Ubuntu', fontSize: 24 };
+const defaultStyle = { fontSize: 24 };
 
 export const Text = ({ children, style }: Props) => (
   <lng-text style={{ ...defaultStyle, ...style }}>{children}</lng-text>

templates/app-template/src/components/Text.tsx

@@ -30,7 +30,7 @@ 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',