fix(callout-quote): non-latin typefaces do not support serif (#11991)

### Related Ticket(s)

[ADCMS-6085](https://jsw.ibm.com/browse/ADCMS-6085)
[ADCMS-5955](https://jsw.ibm.com/browse/ADCMS-5955)

### Description

When using the callout-quote component, the shadowroot styles render the blockquote element in a serif font. (e.g. [mainframe application modernization](https://www.ibm.com/mainframe-application-modernization))

In non-latin fonts, however, there isn't a serif version of those typefaces, leading to the components rendering non-plex characters. (e.g. [MAM in Japanese](https://www.ibm.com/jp-ja/mainframe-application-modernization))

I also took advantage of the opportunity, to write a fix related to the Arabic quotation marks issue here: ADCMS-5955
![image](https://github.com/user-attachments/assets/99d92c4b-4b64-443d-bb74-52573b0610ca)

packages/styles/scss/components/callout-quote/_callout-quote.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/hang' as *;
 @use '../../globals/utils/flex-grid' as *;
@@ -34,6 +35,15 @@
       outline: transparent;
       padding-inline-start: $spacing-07;
     }
+
+    &[lang='ar'],
+    &[lang='zh'],
+    &[lang='jp'],
+    &[lang='ko'] {
+      .#{$prefix}--quote__copy {
+        @include font-family('sans');
+      }
+    }
   }
 
   :host(#{$c4d-prefix}-callout-quote[color-scheme='inverse']) {

packages/styles/scss/components/quote/_quote.scss

@@ -27,6 +27,15 @@
       max-inline-size: 80%;
       padding-inline-start: $spacing-05;
     }
+
+    &[lang='ar'],
+    &[lang='zh'],
+    &[lang='jp'],
+    &[lang='ko'] {
+      .#{$prefix}--quote__copy {
+        @include font-family('sans');
+      }
+    }
   }
 
   .#{$prefix}--quote__container {
@@ -40,7 +49,6 @@
   .#{$prefix}--quote__copy {
     @include make-col-ready;
     @include type-style('quotation-01', true);
-    @include font-family('serif');
 
     padding: 0 $spacing-07 $spacing-07 $spacing-07;
     margin: 0;

packages/web-components/src/components/quote/quote.ts

@@ -14,6 +14,7 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { QUOTE_TYPES } from './defs';
 import '../horizontal-rule/horizontal-rule';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import { LocaleAPI } from '../../internal/vendor/@carbon/ibmdotcom-services/services/Locale';
 
 export { QUOTE_TYPES };
 
@@ -60,6 +61,9 @@ class C4DQuote extends StableSelectorMixin(LitElement) {
   @property({ reflect: true, attribute: 'mark-type' })
   markType = QUOTE_TYPES.DEFAULT;
 
+  @property({ reflect: true, attribute: 'lang' })
+  lc;
+
   /**
    * `true` if there is source heading.
    */
@@ -83,6 +87,14 @@ class C4DQuote extends StableSelectorMixin(LitElement) {
   /**
    * Handles `slotchange` event.
    */
+
+  connectedCallback() {
+    super.connectedCallback();
+    LocaleAPI.getLang().then(({ lc }) => {
+      this.lc = lc;
+    });
+  }
+
   protected _handleSlotChange({ target }: Event) {
     const { name } = target as HTMLSlotElement;
     const hasContent = (target as HTMLSlotElement)
@@ -171,14 +183,14 @@ class C4DQuote extends StableSelectorMixin(LitElement) {
       default:
         return html`
           <span class="${prefix}--quote__mark" part="mark mark--opening"
-            >“</span
+            >${this.lc !== 'ar' ? '“' : '”'}</span
           >
           <blockquote class="${prefix}--quote__copy" part="copy">
             <slot></slot
             ><span
               class="${prefix}--quote__mark-closing"
               part="mark mark--closing"
-              >”</span
+              >${this.lc !== 'ar' ? '”' : '“'}</span
             >
           </blockquote>
         `;