How to set font priority in css?

Question

css

Hello. We use the Roboto font on our project, which is connected via google fonts.
css:
font-family: Roboto, sans-serif;
The browser selects the first font from the list that is installed or can be downloaded using the @font-face rule.
But if the user already has the Roboto font installed, then the browser will not take the font through font-face, but will take the font from his device.
This is where the problem we run into comes in. The user may have a crooked font installed, or its old version (it is not clear why this happened), and the font itself is displayed differently.
How can this problem be solved?

Answer 1

Revealed the problem. When fonts are included via google-fonts, it uses the local parameter, which is why the font from the
src system is loaded first: local('Roboto Light'), local('Roboto-Light'), url( https://fonts.gstatic. com/s/roboto/v18/KFOlCnqEu92... format('woff2');

Answer 2

try uploading your font and set @font-face to a different font-family