Which is better, font-face, import url, or link rel?
Font-face is used in both link rel and import url, it is how internal or external fonts are loaded. Import URL and Link Rel both call for internal or external css files that contain @font-face, it can also be used inline with
<style> So, you can not compare font-face to either
@import, since these methods both use it.
In regards of comparing link and @import its not as easy as saying use this one, or that one and depends on your requirements. Find more information about this below.
SOURCE: Difference between @import and link in CSS
In theory, the only difference between them is that
@import is the
CSS mechanism to include a style sheet and
<link> the HTML
mechanism. However, browsers handle them differently, giving
a clear advantage in terms of performance.
Steve Souders wrote an extensive blog post comparing the impact of
@import (and all sorts of combinations of them)
called "don’t use
That title pretty much speaks for itself.
Yahoo! also mentions it as one of their performance best practices
(co-authored by Steve Souders): Choose
Also, using the
<link> tag allows you to define "preferred" and
You can't do that with
Fonts not working on most browsers
To understand why fonts are not working you must know the limitations of what your coding.
- Link Rel has been around for many, many years and is supported widely by most browsers after IE8, see Can I Use: Link Rel.
- Font Face has been around for many, many years as well and is supported on most browsers after IE8, see Can I Use: @Font-face.
- Import has also been around for many, many years too! and is supported in most browsers after IE8, see Mozilla MDN Docs on @import.
Generally as a rule
<link rel> is the fastest method and the most common method, Google fonts, Adobe Typekit, all use this method by default. If you are having fonts not working on some devices then it is most likely because you are not serving enough different font types.
It is recommend that you serve your fonts in EOT, WOFF, SVG, TTF, OTF and WOFF2, because not all browsers support them all. Ensuring you have plenty of formats should be your first point of call.