CARVIEW |
Select Language
HTTP/2 200
date: Thu, 31 Jul 2025 08:09:12 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
x-robots-tag: none
etag: W/"43f2dce756ef26506a5c47300f9156a7"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: no-referrer-when-downgrade
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com wss://alive-staging.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=wFUj5XQiQl%2FcxaRYzdiX8WsallVulx2KgwHbe6Bs0Vk69eZpLYm3GLYlNG5ekP9cYiCUPyP%2BcIf37W4cLL22zjUzTalifP9%2B2UwCbZOnn9NtsxkbdSUnTxkDSDyLyQbKdnelhXrJuGUhAwAwBzHToO9upP3F9X54sm70QNoyFAgwZjTAasBPhODuJJaYJUlJVrRZnOwfMQ456ecC8fbsp%2FrPF8PCrakaaYfE9rTK%2FIM1CBCLVeAKzG8ui9cC9WxzT87kZzJ9wcF%2FNyFMPu5qzw%3D%3D--WBnqn0IjI3QOO%2FKZ--d8PmHO%2FRKtOqOKlpK7EkLQ%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.892702566.1753949352; Path=/; Domain=github.com; Expires=Fri, 31 Jul 2026 08:09:12 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Fri, 31 Jul 2026 08:09:12 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: D278:23875B:5B6096:71ACF2:688B24A8
Fonts and Icons: FAQs · SAP/fundamental-styles Wiki · GitHub
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 59
Fonts and Icons: FAQs
Jenna Badanowski edited this page Mar 11, 2020
·
1 revision
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.
- 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-content
and 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;
}
- In the case of
fundamental-react
,fundamental-styles/dist/icon.css
is already packaged with each component that uses icons. Consumers offundamental-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 offundamental-vue
...
See the README in each implementation library for further instructions.
You can’t perform that action at this time.