fix(docs): switch fonts to s81c cdn (#1898)

carbon-design-system · Sep 27, 2024 · cdfc980 · cdfc980
1 parent efb75e2
commit cdfc980
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 69 deletions.
diff --git a/packages/core/index.html b/packages/core/index.html
@@ -3,11 +3,8 @@
 	<head>
 		<title>Carbon Charts Vanilla JavaScript Tests</title>
 		<meta charset="UTF-8" />
-		<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
-		<link
-			href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
-			rel="stylesheet"
-			crossorigin="anonymous" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
 		<link rel="stylesheet" href="scss/index.scss" />
 		<style>
 			.container {

diff --git a/packages/docs/index.html b/packages/docs/index.html
@@ -5,11 +5,8 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
 		<title>Carbon Charts</title>
 		<link rel="icon" href="/images/favicon.svg" type="image/svg+xml" />
-		<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
-		<link
-			href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:400|IBM+Plex+Sans:300,400,600&display=swap"
-			rel="stylesheet"
-			crossorigin="anonymous" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
 		<meta property="og:title" content="Carbon Charts Documentation" />
 		<meta
 			property="og:description"

diff --git a/packages/docs/src/lib/stackblitz/angular.ts b/packages/docs/src/lib/stackblitz/angular.ts
@@ -33,11 +33,8 @@ export function getAngularProject(
 <head>
   <title>Carbon Charts Angular Example</title>
   <meta charset="UTF-8" />
-	<link
-		href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
-		rel="stylesheet"
-		crossorigin="anonymous"
-	/>
+	<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
   <style>
 	  .p-1 {
 		  padding: 2rem;

diff --git a/packages/docs/src/lib/stackblitz/html.ts b/packages/docs/src/lib/stackblitz/html.ts
@@ -23,8 +23,9 @@ export function getHtmlProject(
   <!-- Load required stylesheet -->
   <link href="https://unpkg.com/@carbon/charts@latest/dist/styles.css" rel="stylesheet" crossorigin="anonymous" />
 
-  <!-- Load font used by Carbon Charts -->
-  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap" rel="stylesheet" crossorigin="anonymous" />
+  <!-- Load Plex fonts -->
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
 
   <style>
     .p-1 {

diff --git a/packages/docs/src/lib/stackblitz/react.ts b/packages/docs/src/lib/stackblitz/react.ts
@@ -19,11 +19,9 @@ export function getReactProject(
   <title>Carbon Charts React Example</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-	<link
-		href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
-		rel="stylesheet"
-		crossorigin="anonymous"
-	/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
+
   <style>
 	  .p-1 {
 		  padding: 2rem;

diff --git a/packages/docs/src/lib/stackblitz/svelte.ts b/packages/docs/src/lib/stackblitz/svelte.ts
@@ -62,12 +62,8 @@ export default app
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
-		<link
-			href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400%7CIBM+Plex+Sans:400,600&display=swap"
-			rel="stylesheet"
-			crossorigin="anonymous"
-		/>
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
 	</head>
   <body>
     <div id="app"></div>

diff --git a/packages/docs/src/lib/stackblitz/vanilla.ts b/packages/docs/src/lib/stackblitz/vanilla.ts
@@ -16,17 +16,8 @@ export function getVanillaProject(
 <head>
   <title>Carbon Charts Vanilla JavaScript Example</title>
   <meta charset="UTF-8" />
-  <link
-    rel="preconnect"
-    crossorigin="anonymous"
-    href="https://fonts.googleapis.com"
-  />
-  <!-- IBM Plex Sans and Plex Sans Condensed are default fonts (can be changed) -->
-  <link
-    href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
-    rel="stylesheet"
-    crossorigin="anonymous"
-  />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
   <style>
     .p-1 {
       padding: 2rem;

diff --git a/packages/docs/src/lib/stackblitz/vue.ts b/packages/docs/src/lib/stackblitz/vue.ts
@@ -27,12 +27,8 @@ export function getVueProject(
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Carbon Charts Vue Example</title>
-    <link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
-    <link
-      href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400%7CIBM+Plex+Sans:400,600&display=swap"
-      rel="stylesheet"
-      crossorigin="anonymous"
-    />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+	<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
   </head>
   <body>
     <div id="app"></div>

diff --git a/packages/docs/src/routes/Installation.tsx b/packages/docs/src/routes/Installation.tsx
@@ -206,9 +206,9 @@ export default function Installation() {
 
 						<p>
 							The HTML example above loads the UMD bundle and styles in the head of the document
-							from https://unpkg.com (cdnjs is also available). The fonts are loaded from Google's
-							CDN. JavaScript executes once the DOM has loaded. It gets the HTML id of the div that
-							will contain the chart. It then passes the data and options to it.
+							from https://unpkg.com (cdnjs is also available). JavaScript executes once the DOM has
+							loaded. It gets the HTML id of the div that will contain the chart. It then passes the
+							data and options to it.
 						</p>
 					</TabPanel>
 
@@ -321,17 +321,21 @@ export default defineConfig({
 			<h3>Fonts</h3>
 
 			<p>
-				By default, Carbon Charts uses{' '}
-				<a href="https://fonts.google.com/specimen/IBM+Plex+Sans" target="_blank">
+				By default, Carbon Charts use{' '}
+				<a
+					href="https://github.com/IBM/plex?tab=readme-ov-file#ibm-plex-typeface-packages"
+					target="_blank">
 					IBM Plex Sans
 				</a>
 				&nbsp; and&nbsp;
-				<a href="https://fonts.google.com/specimen/IBM+Plex+Sans+Condensed" target="_blank">
+				<a
+					href="https://github.com/IBM/plex?tab=readme-ov-file#ibm-plex-typeface-packages"
+					target="_blank">
 					IBM Plex Sans Condensed
 				</a>
-				&nbsp; which can be loaded in your HTML template from Google's Content Distribution Network
-				(CDN):
-				<CodeSnippet className="language-html">{`<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap" rel="stylesheet" crossorigin="anonymous" />`}</CodeSnippet>
+				:
+				<CodeSnippet className="language-html">{`<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />`}</CodeSnippet>
 			</p>
 
 			<p>

diff --git a/packages/react/index.html b/packages/react/index.html
@@ -4,11 +4,8 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Carbon Charts React Tests</title>
-		<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
-		<link
-			href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400%7CIBM+Plex+Sans:400,600&display=swap"
-			rel="stylesheet"
-			crossorigin="anonymous" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/packages/svelte/src/app.html b/packages/svelte/src/app.html
@@ -5,11 +5,8 @@
 		<link rel="icon" href="%sveltekit.assets%/logo.svg" />
 		<title>Carbon Charts Svelte Tests</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
-		<link
-			href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
-			rel="stylesheet"
-			crossorigin="anonymous" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
 		%sveltekit.head%
 	</head>
 

diff --git a/packages/vue/index.html b/packages/vue/index.html
@@ -4,11 +4,8 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Carbon Charts Vue Tests</title>
-		<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
-		<link
-			href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400%7CIBM+Plex+Sans:400,600&display=swap"
-			rel="stylesheet"
-			crossorigin="anonymous" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+		<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans-condensed.css" />
 		<style>
 			.container {
 				width: 60rem;