Porsche Design System

Font Links

Table of Contents

Supported options
Examples

Function name: getFontLinks()

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.

An in-depth optimization guide can be found at Vanilla Js Optimization.

Supported options#

type FontWeight = 'thin' | 'regular' | 'semi-bold' | 'bold'

Option

Description

Type

Default

subset

Defines which font subset should be loaded.

'latin'

weights

Defines which font weights should be loaded.

FontWeight[]

['regular', 'semi-bold']

cdn

Decides from which CDN the resources are loaded.

'auto' | 'cn'

'auto'

format

Defines 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.

Examples#

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!

<!-- 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>