Fonts should be loaded as soon as possible but only those which are needed. The Porsche Design System is not able to
determine which components you use on the site and which fonts to be provided initially. That's why the font face
stylesheet of the Porsche Design System handles the correct font to be loaded by unicode-range definition but during
runtime and after bootstrapping of your application, which might result in FOUT.
Font loading strategy for Porsche Next uses font-display: swap (FOUT) instead of font-display: block for better
performance and less potential for layout shifts.
Therefore, we provide a ready to use partial in all @porsche-design-system/components-{js|angular|react|vue} packages
which needs to be injected into the <head> of your index.html.
type FontWeight = 'thin' | 'regular' | 'semi-bold' | 'bold'
prev
next
OptionDescriptionTypeDefaultsubsetDefines which font subset should be loaded.'latin' | 'greek' | 'cyril' | 'arabic' | 'pashto' | 'urdu''latin'weightsDefines which font weights should be loaded.FontWeight[]['regular', 'semi-bold']cdnDecides from which CDN the resources are loaded.'auto' | 'cn''auto'formatDefines the output format of the partial. By default, it returns a html string, with jsx it returns valid jsx elements. When using the js option a javascript object is returned.'html' | 'jsx' | 'js''html'
When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project
included.
Project integration differs based on the project setup.
The following showcases the most common ways.
Note: Make sure to preload only fonts which are really needed initially!
prev
next
<!-- index.html -->
<head><!--PLACEHOLDER_FONT_LINKS--></head>
<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
"prestart": "yarn replace",
"replace": "placeholder='<!--PLACEHOLDER_FONT_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getFontLinks())') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html" <!-- Alternative: Force using China CDN -->
"replace": "placeholder='<!--PLACEHOLDER_FONT_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getFontLinks({ cdn: \"cn\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"}
Output
The result of this partial looks like this:
<link rel=preload href=https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2 as=font type=font/woff2 crossorigin>
<link rel=preload href=https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2 as=font type=font/woff2 crossorigin>
// Alternative: Force using China CDN
<link rel=preload href=https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2 as=font type=font/woff2 crossorigin>
<link rel=preload href=https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2 as=font type=font/woff2 crossorigin>
