How to include a font in CSS if it is divided into font files in lowercase and separately in uppercase?

Question

css

Hello!
The situation is as follows, there are fonts, and they need to be connected to the site via CSS.
The font is divided into 4 files:
Font - Bold Caps (Bold in upper case)
Font - Bold - (Bold in lower case)
Font - Regular Caps (Regular in upper case)
Font - Regular (Regular in lower case)
I include a bold font:

@font-face {
    font-family: 'FontName';
    src: url('/fonts/Font - Bold Caps.ttf');
    font-weight: 700;
    font-style: normal;
}

I connect the usual font:

@font-face {
    font-family: 'FontName';
    src: url('/fonts/Font - Regular Caps.ttf');
    font-weight: normal;
    font-style: normal;
}

I connect this font for the entire site:

body {
font: 16px FontName;
}

As you can see from the code, they are both Caps, i.e. in upper case. How can I connect the remaining 2 files so that I have this font in lower case ???
OR you can't do that, and you need to tell the designer to combine uppercase and lowercase fonts in one file for bold and NOT bold?

Answer 1

In general, the solution turned out to be the following:
Fonts can be connected with different styles ( bold , italic , normal).
BUT each file must have both upper and lower case.
Font-Bold (Top and Bottom)
Font-Italic (Top and Bottom)
Font-Regular (Top and Bottom)
Thanks for the help
@potapchino