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

@font-face {
    font-family: 'Sarabun';
    src: url('../font/sarabun/Sarabun-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../font/sarabun/Sarabun-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../font/sarabun/Sarabun-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* Apply Sarabun font to the specific rotating agenda components */
.sarabun-font, 
.sarabun-font body, 
.sarabun-font p, 
.sarabun-font h1, 
.sarabun-font h2, 
.sarabun-font h3, 
.sarabun-font h4, 
.sarabun-font h5, 
.sarabun-font h6, 
.sarabun-font span, 
.sarabun-font div,
.sarabun-font a,
.sarabun-font button,
.sarabun-font input,
.sarabun-font select,
.sarabun-font textarea,
.sarabun-font li {
    font-family: 'Sarabun', sans-serif !important;
}

/* Also attempt to target the body if we can inject a class, otherwise these specific pages usually are wrapped in main containers */
/* Since we want to force it for the whole page when this CSS is loaded */
body {
    font-family: 'Sarabun', sans-serif !important;
}