Adding Fonts to Hosted Login

By default, Hosted Login relies on the default browser faults when rendering screens; that’s one reason why your sign-in screen looks like this:


If you're not 100% satisfied with the default fonts available with Hosted Login, there's a ready-made solution: use the theming.fontURLs setting to add additional fonts to your screens. This can be done by:


  1. Adding the theming.fontURLs setting to your application client.

  2. Setting the value of your new setting to the URL of the font file to be added. Note that this URL should point to the actual font file (e.g., the TTF file); for example:
    https://github.com/google/fonts/raw/master/apache/schoolbell/Schoolbell-Regular.ttf

    To add more than one custom font, simply separate the font URLs by using commas:
    https://github.com/google/fonts/raw/master/apache/schoolbell/Schoolbell-Regular.ttf,https://github.com/google/fonts/blob/master/apache/chewy/Chewy-Regular.ttf
    
    
  3. Referencing the font in a custom CSS stylesheet (which must be included in the theming.stylesheet.URLs setting). For example:
    .screen-heading {
        font-family: "Schoolbell";
    }


So how do you add the theming.fontURLs setting to your application client? There are two ways: by using the Identity Cloud Console, or by using the Identity Cloud’s Configuration APIs.





Using Console to Add a Font

Back to top


To add a font by using Console, complete the following procedure:


  1. In the Console, click Manage Properties and then click the name of your application client:


  2. On the Edit page, click Edit Settings:


  3. On the Edit Settings page, click the Add Setting icon:


  4. In the field for the new setting, type theming.fontURLs and then click Create theming.fontURLs:


  5. In the Value field for the theming.fontURLs setting, enter the URL to your font file. For example:
    https://github.com/google/fonts/raw/master/apache/schoolbell/Schoolbell-Regular.ttf
    
    Your new setting should look similar to this:


  6. Click Save Settings to save your changes:




Using the Configuration APIs to Add a  Font

Back to top


To add a font by using the Configuration APIs, start by calling the /config/{appId}/clients/{apiClientId}/settings endpoint and the GET method to return the current properties and property values of your application client. For example, if your application client has the client ID hrhtj4p8dz9wqhwtpuvg2k8ndet748vs, a Curl command to return the current properties and property values will look similar to this:


curl -L -X GET \
    'https://v1.api.us.janrain.com/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings' \

-H 'Authorization: Basic 6rhfZmc2ZjQ0bXNhYzN2ZXBqanZ4Z2d6dnQzZTNXNhY6OTVjY3hrN2N6YnZ1eng2ZHB0ZTVrpo9uZGo1Ynpxt5U=' 


In turn, your API response will look like the following (with the obvious caveat that the properties and property values you get back will depend on how your application client is configured):


{
    "user_entity_type": "GREG_DEMO",
    "_self": "/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings",
    "default_flow_version": "HEAD",
    "default_flow_name": "videos",
        "regex_standard_newPassword": ".*",
        "janrainOidcClientId": "70a45721-c6ef-4d7c-91ff-f14e9346b8b6",
    "verify_email_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/verify-account?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6",
    "site_name": "Test Public Client",
    "password_recover_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/reset-password?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6"
}


After you have the API response:


  1. Copy the entire response.
  2. Create a new API call, one that uses the /config/{appId}/clients/{apiClientId}/settings endpoint and the PUT method.
  3. Paste the copied API response (still in JSON format) into the body parameter of the new API call.

For example, if you’re using Postman your screen will look similar to this:



In the custom property of the body parameter, add the theming.fontURLs setting, configuring the value of the new property to the font file URL. For example: 


"custom": {"theming.fontURLs": "https://github.com/google/fonts/raw/master/apache/schoolbell/Schoolbell-Regular.ttf"},


Note. If your body parameter doesn’t have a custom property you’ll need to add one and then configure the theming.fontURLs setting inside the new custom property.


Your body parameter should look like this:


{
    "user_entity_type": "GREG_DEMO",
    "_self": "/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings",
    "default_flow_version": "HEAD",
    "default_flow_name": "videos",
    "custom": {"theming.fontURLs": "https://github.com/google/fonts/raw/master/apache/schoolbell/Schoolbell-Regular.ttf"},
    "verify_email_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/verify-account?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6",
    "site_name": "Test Public Client",
    "password_recover_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/reset-password?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6"
}


In turn, your Curl command should look like this:


curl -L -X PUT 'https://v1.api.us.janrain.com/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings' \
-H 'Authorization: Basic 6rhfZmc2ZjQ0bXNhYzN2ZXBqanZ4Z2d6dnQzZTNXNhY6OTVjY3hrN2N6YnZ1eng2ZHB0ZTVrpo9uZGo1Ynpxt5U==' \
-H 'Content-Type: application/json' \
--data-raw '{
    "user_entity_type": "GREG_DEMO",
    "_self": "/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings",
    "default_flow_version": "HEAD",
    "default_flow_name": "videos",
    "custom": {"theming.fontURLs": "https://github.com/google/fonts/raw/master/apache/schoolbell/Schoolbell-Regular.ttf"},
    "verify_email_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/verify-account?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6",
    "site_name": "Test Public Client",
    "password_recover_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/reset-password?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6"
}
'


Now make your API call. If all goes well, you’ll get back both a 200 OK HTTP status code and a response that includes the new set of property values assigned to the application client.


Important. Why do you have to copy all the property values and include all those values in your API call? That’s because the PUT method is all-or-nothing: it replaces all the settings currently assigned to the application client with the settings you have explicitly specified in your API call. Suppose your application client includes the default_flow_name and default_flow_version settings, but you forget to include those in your API call. When you make your call, those two settings will be deleted from the application client.





Verifying Your New Font

Back to top


To verify that Hosted Login is using your new font, wait a minute or two for your changes to take effect, then access your Hosted Login sign-in screen. If your new font is used on the sign-in screen, you should see the appropriate text rendered in that font: 



If the font isn’t used on the sign-in screen you’ll have to click around a bit until you come across a screen where the font is employed.


If you decide you don’t like that font after all, simply delete (or modify) the CSS stylesheet that references the font. (To delete the stylesheet, remove the sheet URL from the theming.stylesheetURLs setting.) If the font isn’t used anywhere else, you should also remove the font URL from the theming.fontURLs setting.