Using Help Scout Fonts & Styles

Providing a consistent user experience across all apps within the Help Scout ecosystem is important, and a key aspect of this is the use of consistent fonts and styles. Whether you’re using React or another framework for your application, Help Scout provides methods to ensure your app’s fonts and styles align with the rest of the interface.

Using Fonts and Styles in React Applications with UI Kit

When using our React UI Kit, applying Help Scout’s fonts and styles is as simple as including the DefaultStyle component in your application. This component automatically loads the correct fonts and styles that are used in the Help Scout interface. The use of DefaultStyle is demonstrated in the following example:

import { DefaultStyle } from "@helpscout/ui-kit";

function App() {
  return (
    <div className="App">
      <DefaultStyle />
      Hi there 👋
    </div>
  );
}

export default App;

Here, DefaultStyle is a React component that applies global CSS styles, including the appropriate font families and other styles, to your application. For more details on the DefaultStyle component, please see the documentation.

Using Fonts in Non-React Applications

If you are not using React, Help Scout offers the getAppStyles() method from our SDK to retrieve the necessary font styles for your application. Currently, this method returns a promise that resolves to a string containing the CSS required to style your application with the Help Scout fonts. In the future, we plan to expand this method to include additional styles.

Here’s a general example of how you can use this method:

import HelpScout from '@helpscout/javascript-sdk';

async function applyStyles() {
  // Get the styles from Help Scout
  const styles = await HelpScout.getAppStyles();
  
  // Create a style element
  const styleElement = document.createElement('style');
  
  // Set the innerHTML of the style element to the styles
  styleElement.innerHTML = styles;
  
  // Append the style element to the head of the document
  document.head.appendChild(styleElement);
}

applyStyles();

This function creates a new style element and inserts the styles returned by getAppStyles() into it. This newly created style element is then appended to the document’s head, applying the Help Scout styles to your application.

For more information about the getAppStyles() method, check the SDK reference.

Whether you’re using React or another framework, these methods help ensure that your app maintains a consistent look and feel with the rest of the Help Scout interface. If you have any questions or need further clarification on this process, we’re here to assist you.