diff --git a/shell/assets/fonts/suse/suse-v2-latin-300.woff b/shell/assets/fonts/suse/suse-v2-latin-300.woff new file mode 100644 index 00000000000..c42649312da Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-300.woff differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-300.woff2 b/shell/assets/fonts/suse/suse-v2-latin-300.woff2 new file mode 100644 index 00000000000..deae7517eee Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-300.woff2 differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-600.woff b/shell/assets/fonts/suse/suse-v2-latin-600.woff new file mode 100644 index 00000000000..aca05debf80 Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-600.woff differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-600.woff2 b/shell/assets/fonts/suse/suse-v2-latin-600.woff2 new file mode 100644 index 00000000000..7a9277db94f Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-600.woff2 differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-700.woff b/shell/assets/fonts/suse/suse-v2-latin-700.woff new file mode 100644 index 00000000000..5110c58b4b7 Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-700.woff differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-700.woff2 b/shell/assets/fonts/suse/suse-v2-latin-700.woff2 new file mode 100644 index 00000000000..19adbb02367 Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-700.woff2 differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-800.woff b/shell/assets/fonts/suse/suse-v2-latin-800.woff new file mode 100644 index 00000000000..7197d852c09 Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-800.woff differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-800.woff2 b/shell/assets/fonts/suse/suse-v2-latin-800.woff2 new file mode 100644 index 00000000000..813c8c356cb Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-800.woff2 differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-regular.woff b/shell/assets/fonts/suse/suse-v2-latin-regular.woff new file mode 100644 index 00000000000..262455ce4be Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-regular.woff differ diff --git a/shell/assets/fonts/suse/suse-v2-latin-regular.woff2 b/shell/assets/fonts/suse/suse-v2-latin-regular.woff2 new file mode 100644 index 00000000000..10e0efaf74e Binary files /dev/null and b/shell/assets/fonts/suse/suse-v2-latin-regular.woff2 differ diff --git a/shell/assets/styles/base/_typography.scss b/shell/assets/styles/base/_typography.scss index 2cd5b4c3f63..32a4e1b608c 100644 --- a/shell/assets/styles/base/_typography.scss +++ b/shell/assets/styles/base/_typography.scss @@ -8,6 +8,7 @@ H1, H2, H3, H4, H5, H6 { font-style: normal; font-weight: 400; margin: 0 0 10px 0; + font-family: var(--title-font-family, unset); // Use the var if set, otherwise unset and use the font defined by the parent } H1 { diff --git a/shell/assets/styles/fonts/_fontstack.scss b/shell/assets/styles/fonts/_fontstack.scss index ed0b94a1b32..78d04db561c 100644 --- a/shell/assets/styles/fonts/_fontstack.scss +++ b/shell/assets/styles/fonts/_fontstack.scss @@ -46,4 +46,56 @@ src: local(''), url('~@shell/assets/fonts/roboto-mono/roboto-mono-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('~@shell/assets/fonts/roboto-mono/roboto-mono-v13-latin-regular.woff') format('woff'), /* Modern Browsers */ -} \ No newline at end of file +} + +// SUSE Font + +/* suse-300 - latin */ +@font-face { + font-display: swap; + font-family: 'SUSE'; + font-style: normal; + font-weight: 300; + src: url('~@shell/assets/fonts/suse/suse-v2-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + url('~@shell/assets/fonts/suse/suse-v2-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ +} + +/* suse-regular - latin */ +@font-face { + font-display: swap; + font-family: 'SUSE'; + font-style: normal; + font-weight: 400; + src: url('~@shell/assets/fonts/suse/suse-v2-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + url('~@shell/assets/fonts/suse/suse-v2-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ +} + +/* suse-600 - latin */ +@font-face { + font-display: swap; + font-family: 'SUSE'; + font-style: normal; + font-weight: 600; + src: url('~@shell/assets/fonts/suse/suse-v2-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + url('~@shell/assets/fonts/suse/suse-v2-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ +} + +/* suse-700 - latin */ +@font-face { + font-display: swap; + font-family: 'SUSE'; + font-style: normal; + font-weight: 700; + src: url('~@shell/assets/fonts/suse/suse-v2-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + url('~@shell/assets/fonts/suse/suse-v2-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ +} + +/* suse-800 - latin */ +@font-face { + font-display: swap; + font-family: 'SUSE'; + font-style: normal; + font-weight: 800; + src: url('~@shell/assets/fonts/suse/suse-v2-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + url('~@shell/assets/fonts/suse/suse-v2-latin-800.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ +} diff --git a/shell/assets/styles/themes/_suse.scss b/shell/assets/styles/themes/_suse.scss index 6d1debb890b..fbe783fe5a3 100644 --- a/shell/assets/styles/themes/_suse.scss +++ b/shell/assets/styles/themes/_suse.scss @@ -5,6 +5,8 @@ $jungle-120: #008657; + --title-font-family : 'SUSE', 'Lato', sans-serif; + &.theme-light { --primary: #{$jungle-120}; --primary-text: #FFFFFF; diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue index 2010c4c1e35..002f9894b99 100644 --- a/shell/components/nav/Header.vue +++ b/shell/components/nav/Header.vue @@ -857,6 +857,7 @@ export default { .product-name { font-size: 16px; + font-family: var(--title-font-family, unset); // Use the var if set, otherwise unset and use the font defined by the parent } .side-menu-logo { diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue index b445f5d3aaa..00587e0e838 100644 --- a/shell/components/nav/TopLevelMenu.vue +++ b/shell/components/nav/TopLevelMenu.vue @@ -975,6 +975,8 @@ export default { $option-height: $icon-size + $option-padding + $option-padding; .side-menu { + font-family: var(--title-font-family, unset); // Use the var if set, otherwise unset and use the font defined by the parent + .menu { position: absolute; width: $app-bar-collapsed-width;