Fonts and Icons: FAQs

Why did fundamental-styles remove fonts from the distribution package?

Fonts are already published by @sap/theming-base-content package. This package is maintained by SAP UX and contain all necessary data to connect to the SAP global theming infrastructure.

By removing the duplication of the icon font and font '72' from fundamental-styles, we're streamlining the pipeline. This also reduces the bundle size of the implementation libraries (fundamental-react, fundamental-ngx, fundamental-vue and gives consumers the freedom to load fonts as needed in their final applications. For example, an app consuming fundamental-react decreased bundle size by 1.2 MB after removing fonts.

I am a direct consumer of fundamental-styles, what do I need to do?

• For consumers of fundamental-styles/dist/fundamental-styles.css, fundamental-styles/dist/icon.css is already included in that bundle. Consumers will need to install @sap/theming-base-contentand declare @font-face rules in their application.

Example of @font-face rules:

 @font-face {
        font-family: "72";
        src: url("path/to/fonts/from/sap/theming") format("woff"); // Bold, Light, Regular available in woff and woff2
        font-weight: normal;
        font-style: normal;
    };

    @font-face {
        font-family: "SAP-icons";
        src: url("path/to/icons/from/sap/theming") format("woff"); // available in woff, woff2 and ttf
        font-weight: normal;
        font-style: normal;
    }

I am a consumer of one of the implementation libraries, what do I need to do?

• In the case of fundamental-react, fundamental-styles/dist/icon.css is already packaged with each component that uses icons. Consumers of fundamental-react are responsible for installing @sap/theming-base-content as a dependency and declaring @font-face rules in their application.
• In the case of fundamental-ngx... In the case of fundamental-vue...

See the README in each implementation library for further instructions.