When you download a font family from Google Fonts, it contains multiple files, each corresponding to a different style. It is common to just import a regular 400 with the font face declaration.

The better practice is to use the method called style linking. In @font-face, we can use the same font-family name for all the styles that you want to use. Then, you set the weight and style for each as the same as the style itself.

CSS will access each font file by matching the style and weight. This is called style linking. The important thing here is that the order of the css properties has to match with the exact same order as in the font-face declaration.

Font can be confusing because there are a few different ways to achieve this. Style linking is probably the best way because it is supported by most browsers. Generally speaking, the best practice is to have font files for all the weights that you use in your design system and link them by using style linking. Then, each font will use the specific files. Google Font only gives you the truetype format. If you want to support all the browsers, you need to have different file formats, too. If you need further information about the file types, this CSS-Tricks blog is great.