Porsche Design System

Font Face Stylesheet

Table of Contents

Supported options
Examples

Critical CSS should be inlined in order to improve the performance of your page.

Therefore the getFontFaceStylesheet() has been deprecated and will be removed with the next major release.

Please use the getFontFaceStyles() partial instead.

Function name: getFontFaceStylesheet()

If you use the Porsche Design System components we inject a stylesheet with all font-face definitions into the head of your application as soon as our core is loaded. To improve loading performance we recommend that you include the link to the stylesheet on your own.

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.

We suggest that getFontFaceStylesheet() partial is implemented in every application that uses the Porsche Design System therefore the partial provides additional link tags with rel="preconnect" and rel="dns-prefetch" to improve the performance of the initial connection to our cdn.

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

Supported options#

Option

Description

Type

Default

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.

'html' | 'jsx'

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

<!-- index.html -->
<head>
  <!--PLACEHOLDER_FONT_FACE_STYLESHEET-->
</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_FACE_STYLESHEET-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getFontFaceStylesheet())') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: Force using China CDN -->
  "replace": "placeholder='<!--PLACEHOLDER_FONT_FACE_STYLESHEET-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getFontFaceStylesheet({ cdn: \"cn\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
}

Output

The result of this partial looks like this:

<link rel=preconnect href=https://cdn.ui.porsche.com crossorigin>
<link rel=dns-prefetch href=https://cdn.ui.porsche.com crossorigin>
<link rel=stylesheet href=https://cdn.ui.porsche.com/porsche-design-system/styles/font-face.7076ba0.css type=text/css crossorigin>

// Alternative: Force using China CDN
<link rel=preconnect href=https://cdn.ui.porsche.cn crossorigin>
<link rel=dns-prefetch href=https://cdn.ui.porsche.cn crossorigin>
<link rel=stylesheet href=https://cdn.ui.porsche.cn/porsche-design-system/styles/font-face.cn.c531632.css type=text/css crossorigin>

Deprecation hint