Add FontFace component

README.md

@@ -33,6 +33,7 @@ yarn add the-platform
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+
 - [Hooks](#hooks)
   - [`useDeviceMotion()`](#usedevicemotion)
   - [`useDeviceOrientation()`](#usedeviceorientation)
@@ -41,6 +42,7 @@ yarn add the-platform
   - [`useMedia()`](#usemedia)
   - [`useScript()`](#usescript)
   - [`useStylesheet()`](#usestylesheet)
+  - [`useFontFace()`](#usefontface)
   - [`useWindowScrollPosition()`](#usewindowscrollposition)
   - [`useWindowSize()`](#usewindowsize)
 - [Components](#components)
@@ -50,6 +52,7 @@ yarn add the-platform
   - [`<Audio>`](#audio)
   - [`<Preload>`](#preload)
   - [`<Stylesheet>`](#stylesheet)
+  - [`<FontFace>`](#fontface)
 - [Authors](#authors)
 - [Inspiration](#inspiration)
 
@@ -212,6 +215,39 @@ const Example = () => {
 };
 ```
 
+### `useFontFace()`
+
+This will throw a promise (must use with Suspense).
+
+#### Arguments
+
+Object containing:
+
+- `family: string`
+- `source: string`
+- `display?: string`
+- `featureSettings?: string`
+- `stretch?: string`
+- `style?: string`
+- `unicodeRange?: string`
+- `variant?: string`
+- `variationSettings?: string`
+- `weight?: string | number`
+
+```js
+import { useFontFace } from 'the-platform';
+
+const Example = () => {
+  const _unused = useFontFace({
+    family: 'News Cycle',
+    source:
+      'url(https://fonts.gstatic.com/s/newscycle/v15/CSR64z1Qlv-GDxkbKVQ_fOAKTfl8tOQ.woff2) format("woff2")',
+  });
+
+  // ...
+};
+```
+
 ### `useWindowScrollPosition()`
 
 #### Returns
@@ -418,6 +454,44 @@ function App() {
 export default App;
 ```
 
+### `<FontFace>`
+
+Lazy load a web font.
+
+#### Props
+
+- `family: string`
+- `source: string`
+- `display?: string`
+- `featureSettings?: string`
+- `stretch?: string`
+- `style?: string`
+- `unicodeRange?: string`
+- `variant?: string`
+- `variationSettings?: string`
+- `weight?: string | number`
+
+```js
+import React from 'react';
+import { FontFace } from 'the-platform';
+
+function App() {
+  return (
+    <div>
+      <h1>Web fonts</h1>
+      <React.Suspense maxDuration={300} fallback={'loading...'}>
+        <FontFace
+          family="News Cycle"
+          source="url(https://fonts.gstatic.com/s/newscycle/v15/CSR64z1Qlv-GDxkbKVQ_fOAKTfl8tOQ.woff2) format('woff2')"
+        />
+      </React.Suspense>
+    </div>
+  );
+}
+
+export default App;
+```
+
 ## Authors
 
 - [Jared Palmer](https://twitter.com/jaredpalmer)

example/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Img, Script, Video, Audio, Stylesheet } from 'the-platform';
+import { Img, Script, Video, Audio, Stylesheet, FontFace } from 'the-platform';
 
 function App() {
   return (
@@ -24,6 +24,13 @@ function App() {
         </Script>
 
         <Stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" />
+
+        <FontFace
+          family="News Cycle"
+          source="url(https://fonts.gstatic.com/s/newscycle/v15/CSR64z1Qlv-GDxkbKVQ_fOAKTfl8tOQ.woff2) format('woff2')"
+        >
+          <h2 style={{ fontFamily: 'News Cycle' }}>Yay, News Cycle</h2>
+        </FontFace>
       </React.Suspense>
     </div>
   );

src/FontFace.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { createResource } from './createResource';
+
+type Partial<T> = { [P in keyof T]?: T[P] };
+
+type FontFaceDescriptors = {
+  display: string;
+  family: string;
+  featureSettings: string;
+  stretch: string;
+  style: string;
+  unicodeRange: string;
+  variant: string;
+  variationSettings: string;
+  weight: string | number;
+};
+
+type FontProps = FontFaceDescriptors & {
+  family: string;
+  readonly loaded: Promise<FontProps>;
+  readonly status: 'unloaded' | 'loading' | 'loaded' | 'error';
+};
+
+export type FontFaceProps = Partial<FontFaceDescriptors> & {
+  family: string;
+  source: string;
+};
+
+export const FontFaceResource = createResource(
+  load,
+  ({ family, style, weight }) => `${family}.${weight}.${style}`
+);
+
+function load({ family, source, ...descriptors }: FontFaceProps) {
+  return new window.FontFace(family, source, descriptors)
+    .load()
+    .then((font: FontProps) => document.fonts.add(font));
+}
+
+export const FontFace: React.FC<FontFaceProps> = ({
+  children = null,
+  ...rest
+}) => {
+  FontFaceResource.read(rest);
+
+  if (typeof children === 'function') {
+    return children();
+  }
+
+  return children;
+};
+
+export function useFontFace(props: FontFaceProps) {
+  return FontFaceResource.read(props);
+}

src/index.tsx

@@ -1,4 +1,5 @@
 export * from './Audio';
+export * from './FontFace';
 export * from './Img';
 export * from './Preload';
 export * from './Script';

typings/global.d.ts

@@ -0,0 +1,7 @@
+interface Window {
+  FontFace?: any;
+}
+
+interface Document {
+  fonts?: any;
+}