@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSansArabic-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSansArabic-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSansArabic-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/*english font*/

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSans-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSans-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/Style%20Library/LD2/ar-sa/fonts/IBMPlexSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}


/* 2) Font variables */
:root{
  --font-ar: "IBM Plex Sans Arabic", sans-serif;
  --font-en: "IBM Plex Sans", sans-serif;
}

/* 3) Default (English / LTR) */
html, body{
  font-family: var(--font-en);
}

/* 4) Arabic pages (best) */
html[lang="ar"], html[dir="rtl"],
html[lang="ar"] body, html[dir="rtl"] body :not(i[class^="fa"]):not(i[class*=" fa"]):not(.ms-qcb-glyph){
  font-family: var(--font-ar);
}

/* 5) If you have mixed content inside one page, apply by lang attribute */
[lang="ar"] *:not(i[class^="fa"]):not(i[class*=" fa"]):not(.ms-qcb-glyph){ font-family: var(--font-ar) !important; }
[lang="en"] *:not(i[class^="fa"]):not(i[class*=" fa"]):not(.ms-qcb-glyph){ font-family: var(--font-en) !important; }