@font-face VS @import

Question

While defining a Web Font in CSS - I have noticed a small change in the way my font displays depending on which method of font definition I use:

@font-face {url('https:/https://fonts.googleapis.com/...');}

or

@import url('https:/https://fonts.googleapis.com/...')

with the @import I've got a lighter version of the font and with the @font-face method it is a bit bolder.

Can anyone tell me why this happens, what the differences between the 2 "methods" are, and which is more advisable (advantages vs disadvantages).

Answer 1

Usually, @font-face is used to declare fonts that were downloaded and @import is for adding another stylesheet file. I would say that it could be related to font-weights. Because @font-face is creating the font that is downloaded it may be the problem. Does the google fonts link contain the font-weights?