rfoel
diff --git a/‎.editorconfig‎
Lines changed: 0 additions & 9 deletions b/‎.editorconfig‎
Lines changed: 0 additions & 9 deletions
diff --git a/‎.eslintignore‎
Lines changed: 0 additions & 5 deletions b/‎.eslintignore‎
Lines changed: 0 additions & 5 deletions
diff --git a/‎README.md‎
Lines changed: 7 additions & 4 deletions b/‎README.md‎
Lines changed: 7 additions & 4 deletions
diff --git a/‎src/index.js‎
Lines changed: 9 additions & 25 deletions b/‎src/index.js‎
Lines changed: 9 additions & 25 deletions
@@ -20,8 +20,8 @@ import ReactFontLoader from 'react-font-loader'
 const App = () => {
   return (
     <div>
-      <ReactFontLoader fonts={[{ name: 'Permanent Marker' }]} />
-      <h1 style={{ fontFamily: 'Permanent Marker' }}>Custom font</h1>
+      <ReactFontLoader url='https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700&display=swap' />
+      <h1 style={{ fontFamily: 'Red Hat Display' }}>Custom font</h1>
     </div>
   )
 }
@@ -36,11 +36,14 @@ import React from 'react'
 import useReactFontLoader from 'react-font-loader'
 
 const App = () => {
-  useReactFontLoader({ fonts: [{ name: 'Permanent Marker' }] })
+  useReactFontLoader({
+    url:
+      'https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700&display=swap',
+  })
 
   return (
     <div>
-      <h1 style={{ fontFamily: 'Permanent Marker' }}>Custom font</h1>
+      <h1 style={{ fontFamily: 'Red Hat Display' }}>Custom font</h1>
     </div>
   )
 }
 
@@ -1,40 +1,24 @@
 import { useEffect } from 'react'
-import { arrayOf, number, oneOfType, shape, string } from 'prop-types'
+import { string } from 'prop-types'
 
-const createElement = fonts => {
-  const families = fonts
-    .reduce((accumulator, font) => {
-      const family = font.name.replace(' ', '+')
-      const weight = (font.weight && `:${font.weight.join(',')}`) || ''
-      return [...accumulator, `${family}${weight}`]
-    }, [])
-    .join('|')
-
-  const link = document.createElement('link')
-  link.rel = 'stylesheet'
-  link.href = `https://fonts.googleapis.com/css?family=${families}`
-
-  return link
+const createElement = url => {
+  const element = document.createElement('link')
+  element.rel = 'stylesheet'
+  element.href = url
+  return element
 }
 
-const ReactFontLoader = ({ fonts }) => {
+const ReactFontLoader = ({ url }) => {
   useEffect(() => {
-    const element = createElement(fonts)
+    const element = createElement(url)
     document.head.appendChild(element)
-
     return () => document.head.removeChild(element)
   }, [])
-
   return null
 }
 
 ReactFontLoader.propTypes = {
-  fonts: arrayOf(
-    shape({
-      name: string.isRequired,
-      weights: arrayOf(oneOfType([string, number])),
-    }),
-  ).isRequired,
+  url: string.isRequired,
 }
 
 export default ReactFontLoader