@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/sarabun/Sarabun-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/sarabun/Sarabun-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/sarabun/Sarabun-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/sarabun/Sarabun-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/sarabun/Sarabun-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/sarabun/Sarabun-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

html,
html body,
html body *,
html body input,
html body button,
html body select,
html body textarea,
html body option,
html body *::before,
html body *::after {
  font-family: "TH Sarabun New" !important;
}

/* Form text is 18px by default.  Old compact controls that explicitly set a
   size through a class or inline style keep that size, as enlarging those
   image-slice controls would move neighbouring artwork.  No width, height,
   padding or margin is changed here. */
html body input,
html body select,
html body textarea,
html body button {
  font-size: 18px;
}