Updated Internationalization documentation and removed local Burmese …

…font
undp · Oct 2, 2024 · 6c20a13 · 6c20a13
1 parent d93a69e
commit 6c20a13
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 64 deletions.
diff --git a/docs/css/base-minimal-no-grid.min.css b/docs/css/base-minimal-no-grid.min.css
diff --git a/docs/css/base-minimal.min.css b/docs/css/base-minimal.min.css
diff --git a/docs/js/all.min.js b/docs/js/all.min.js
diff --git a/docs/js/swiper.min.js b/docs/js/swiper.min.js
diff --git a/stories/Documentation/Howtouse.mdx b/stories/Documentation/Howtouse.mdx
@@ -17,8 +17,8 @@ Using the UNDP design system is very simple. To use the design system you need t
 - Copy the HTML of the component in your project.
 - Check out the CSS and JS reference section in the document.
 - Use the CSS and JS on your project as suggested.
+- Follow [Internationalisation](?path=/docs/getting-started-internationalization--docs) guidelines to add support for additional languages.
 - Check [Starter template project](https://github.com/undp/design-system-starter-template) for reference implementation and preconfigured boilerplate setup.
-- Connecting [fonts](?path=/docs/getting-started-font-implementation--docs) for the countries of the South Caucasus, the Near and Far East (if required).
 
 ### Development
 

diff --git a/stories/Documentation/fontImplementation.mdx b/stories/Documentation/fontImplementation.mdx
diff --git a/stories/Documentation/internationalization.mdx b/stories/Documentation/internationalization.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story } from "@storybook/blocks";
+
+<Meta
+  title="Getting started/Internationalization"
+/>
+
+# Internationalization
+
+UNDP Design System supports following languages outside of the box using [Proxima Nova](https://fonts.adobe.com/fonts/proxima-nova), [Söhne Breit](https://klim.co.nz/retail-fonts/soehne-breit/) and [UNBangla](https://www.undp.org/bangladesh/publications/un-bangla-font) fonts:
+1. Latin based languages (i.e. English, French, Spanish, etc)
+2. Cyrillic languages (i.e. Ukrainian, Macedonian)
+3. Bengali language
+
+Additionally, you can support content in following languages using [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans) fonts family:
+
+- Azerbaijani, Nepali ([Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans))
+- Arabic, Kurdish ([Noto Sans Arabic](https://fonts.google.com/noto/specimen/Noto+Sans+Arabic))
+- Burmese ([Noto Sans Myanmar](https://fonts.google.com/noto/specimen/Noto+Sans+Myanmar))
+- Chinese ([Noto Sans SC](https://fonts.google.com/noto/specimen/Noto+Sans+SC))
+- Japanese ([Noto Sans Japanese](https://fonts.google.com/noto/specimen/Noto+Sans+JP))
+- Georgian ([Noto Sans Georgian](https://fonts.google.com/noto/specimen/Noto+Sans+Georgian))
+- Khmer ([Noto Sans Khmer](https://fonts.google.com/noto/specimen/Noto+Sans+Khmer))
+- Korean ([Noto Sans Korean](https://fonts.google.com/noto/specimen/Noto+Sans+KR))
+
+To add support for specific language make sure target page is using correct HTML lang attribute, i.e. `<html lang="jp">` for Japanese language, and follow instructions for embedding respective web font into the page header.
diff --git a/stories/assets/scss/_fonts.scss b/stories/assets/scss/_fonts.scss
@@ -104,41 +104,41 @@
 }
 
 /* Google Noto Sans */
-@font-face {
-  font-display: swap;
-  font-family: 'NotoSans';
-  font-weight: 300;
-  src:
-    url('../fonts/NotoSansMyanmar-Light.woff2') format('woff2'),
-    url('../fonts/NotoSansMyanmar-Light.woff') format('woff');
-}
+// @font-face {
+//   font-display: swap;
+//   font-family: 'NotoSans';
+//   font-weight: 300;
+//   src:
+//     url('../fonts/NotoSansMyanmar-Light.woff2') format('woff2'),
+//     url('../fonts/NotoSansMyanmar-Light.woff') format('woff');
+// }
 
-@font-face {
-  font-display: swap;
-  font-family: 'NotoSans';
-  font-weight: 400;
-  src:
-    url('../fonts/NotoSansMyanmar-Regular.woff2') format('woff2'),
-    url('../fonts/NotoSansMyanmar-Regular.woff') format('woff');
-}
+// @font-face {
+//   font-display: swap;
+//   font-family: 'NotoSans';
+//   font-weight: 400;
+//   src:
+//     url('../fonts/NotoSansMyanmar-Regular.woff2') format('woff2'),
+//     url('../fonts/NotoSansMyanmar-Regular.woff') format('woff');
+// }
 
-@font-face {
-  font-display: swap;
-  font-family: 'NotoSans';
-  font-weight: 500;
-  src:
-    url('../fonts/NotoSansMyanmar-Medium.woff2') format('woff2'),
-    url('../fonts/NotoSansMyanmar-Medium.woff') format('woff');
-}
+// @font-face {
+//   font-display: swap;
+//   font-family: 'NotoSans';
+//   font-weight: 500;
+//   src:
+//     url('../fonts/NotoSansMyanmar-Medium.woff2') format('woff2'),
+//     url('../fonts/NotoSansMyanmar-Medium.woff') format('woff');
+// }
 
-@font-face {
-  font-display: swap;
-  font-family: 'NotoSans';
-  font-weight: 600;
-  src:
-    url('../fonts/NotoSansMyanmar-SemiBold.woff2') format('woff2'),
-    url('../fonts/NotoSansMyanmar-SemiBold.woff') format('woff');
-}
+// @font-face {
+//   font-display: swap;
+//   font-family: 'NotoSans';
+//   font-weight: 600;
+//   src:
+//     url('../fonts/NotoSansMyanmar-SemiBold.woff2') format('woff2'),
+//     url('../fonts/NotoSansMyanmar-SemiBold.woff') format('woff');
+// }
 
 /* UN Bangla unicode */
 @font-face {