Show how to import custom fonts in Storybook

2 files changed, 13 insertions, 3 deletions

diff --git a/src/keycloak-theme/login/Template.tsx b/src/keycloak-theme/login/Template.tsx
index 871bca1..cb663b9 100644
--- a/src/keycloak-theme/login/Template.tsx
+++ b/src/keycloak-theme/login/Template.tsx
@@ -50,8 +50,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     return (
         <div className={getClassName("kcLoginClass")}>
             <div id="kc-header" className={getClassName("kcHeaderClass")}>
-                <div id="kc-header-wrapper" className={getClassName("kcHeaderWrapperClass")}>
-                    {msg("loginTitleHtml", realm.displayNameHtml)}
+                <div 
+                    id="kc-header-wrapper" 
+                    className={getClassName("kcHeaderWrapperClass")}
+                    style={{ "fontFamily": '"Work Sans"' }}
+                >
+                    {msg("loginTitleHtml", realm.displayNameHtml)}!!!
                 </div>
             </div>
 
diff --git a/src/keycloak-theme/login/createPageStory.tsx b/src/keycloak-theme/login/createPageStory.tsx
index cdf570f..24a5d70 100644
--- a/src/keycloak-theme/login/createPageStory.tsx
+++ b/src/keycloak-theme/login/createPageStory.tsx
@@ -15,7 +15,13 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: {
             storyPartialKcContext: params.kcContext
         });
 
-        return <KcApp kcContext={kcContext} />;
+        return (
+            <>
+                {/* If you import custom fonts in your index.html you have to import them in storybook as well*/}
+                <link rel="stylesheet" type="text/css" href="fonts/WorkSans/font.css" />
+                <KcApp kcContext={kcContext} />
+            </>
+        );
 
     }