Add useFont hook (#166)

* Add useFont hook for loading font assets and update documentation

- Introduced the useFont hook to facilitate loading font assets as SDF textures.
- Updated the use-asset documentation to include usage examples for the new useFont hook.
- Modified index.ts to export the useFont hook alongside existing hooks.

* Update packages/lib/src/hooks/use-asset.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: marklundin

packages/docs/content/docs/api/hooks/use-asset.mdx

@@ -165,6 +165,31 @@ export function RenderEnvAtlas() {
 
 See the [EnvAtlas](/docs/api/components/EnvAtlas) component for more information.
 
+## useFont
+
+Text in PlayCanvas is rendered using Signed-Distance-Fields (SDF's), so you'll need to convert your ttf fonts into the appropriate format before loading them. 
+
+If you're using Vite or Rollup there's an official plugin to convert ttf files for you at build time. Check out the [@playcanvas/rollup](https://www.npmjs.com/package/@playcanvas/plugin) for more information.
+
+You can import a ttf using the `?sdf` query parameter whhich will automatically convert it into an SDF texture at build time.
+
+```tsx copy filename="render-font.tsx"
+
+// Use the @playcanvas/rollup plugin to convert the ttf file into an SDF texture at build time.
+import inconsolata from "@assets/fonts/inconsolata.ttf?sdf";
+import { useFont } from '@playcanvas/react/hooks';
+
+export function InconsolataFont() {
+  const { asset, loading, error } = useFont(inconsolata);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <ErrorMessage message={error} />;
+  if (!asset) return null;
+
+  return asset;
+}
+```
+
 ## useAsset
 
 This is a generic hook for loading any type of asset. You can use it to load any asset type that PlayCanvas supports which is sometimes useful if you need to load an asset dynamically.

packages/lib/src/hooks/index.ts

@@ -5,6 +5,6 @@ export { useScript } from './use-script';
 export { useApp, AppContext } from './use-app';
 export { useParent, ParentContext } from './use-parent';
 export { useMaterial } from './use-material'
-export { useAsset, useSplat, useTexture, useEnvAtlas, useModel } from './use-asset';
+export { useAsset, useSplat, useTexture, useEnvAtlas, useModel, useFont } from './use-asset';
 export { useFrame } from './use-frame';
 export type { AssetResult } from './use-asset';

packages/lib/src/hooks/use-asset.ts

@@ -253,3 +253,29 @@ export const useModel = (
   props: Record<string, unknown> = {},
 ): AssetResult => 
   useAsset(src, 'container', props);
+
+/**
+ * Simple hook to load a font asset.
+ * 
+ * Fonts are described SDF textures, so you'll need to convert your .ttf files to SDF textures.
+ * into the correct format.
+ * 
+ * Learn more about SDF textures {@link https://playcanvas-react.vercel.app/docs/api/hooks/use-asset#usefont}.
+ * 
+ * @param src - The source URL of the font asset.
+ * @param props - Additional properties to pass to the asset loader.
+ * @returns An object containing the asset, loading state, and any error.
+ * 
+ * @example
+ * ```tsx
+ * import roboto from '@assets/fonts/roboto.ttf?url';
+ * export const App = () => {
+ *  const { asset, loading, error } = useFont(roboto);
+ * }
+ * ```
+ */
+export const useFont = (
+  src: string, 
+  props: Record<string, unknown> = {},
+): AssetResult => 
+  useAsset(src, 'font', props);