@font-face {
    font-family: "Zen Kaku Gothic New";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/zen-kaku-gothic-new/zen-kaku-gothic-new-regular.ttf") format("truetype");
}

@font-face {
    font-family: "Zen Kaku Gothic New";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/zen-kaku-gothic-new/zen-kaku-gothic-new-bold.ttf") format("truetype");
}

@font-face {
    font-family: "Zen Old Mincho";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/zen-old-mincho/zen-old-mincho-regular.ttf") format("truetype");
}

@font-face {
    font-family: "Zen Old Mincho";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/zen-old-mincho/zen-old-mincho-bold.ttf") format("truetype");
}

@font-face {
    font-family: "Source Han Code Jp";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-han-code-jp/source-han-code-jp-normal.otf") format("opentype");
}

@font-face {
    font-family: "Source Han Code Jp";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/source-han-code-jp/source-han-code-jp-bold.otf") format("opentype");
}

html {
    --font-family-sans-serif: "Zen Kaku Gothic New", sans-serif;
    --font-family-serif: "Zen Old Mincho", sans-serif;
    --font-family-monospace: "Source Han Code Jp", monospace;
}

html {
    font-family: var(--font-family-sans-serif);
}

html[data-font="sans-serif"] {
    font-family: sans-serif;
}

html[data-font="serif"] {
    font-family: serif;
}

code {
    font-family: var(--font-family-monospace);
}