Just wondering, what is the difference between putting the @font-face rules in a <style> tag in the header, or putting a <link ref="preload" as="font"> in the header?
For example, Shopify's Dawn theme has both, first the @font-face in some <style> tag at line 44, then the <link> at line 224. Will this choice improve performance?
It makes intuitively more sense to me to use the <link> when the @font-face rule sits in some external stylesheet, which has to be downloaded first.
The difference is that the <style> tag will only load the fonts that are used in the document, while the the <link> tag will load all the fonts and store, so that they are ready to be used right away when necessary.. that's how I understand them