Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
Based on my research, I found that there are 3 ways to do that which are:
@import url ('https://..........'); in CSS@font-face {fonta-family: 'myfont'; src: url('myfont.tff');} in CSS<link rel="stylesheet" href="https://.........." type="text/css"/> in HTMLWhich method has the best compatibility across browsers?
At the moment am using the 3rd method but the font doesn't work on some mobile browsers.
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 <link> or @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
@importis the CSS mechanism to include a style sheet and<link>the HTML mechanism. However, browsers handle them differently, giving<link>a clear advantage in terms of performance.Steve Souders wrote an extensive blog post comparing the impact of both
<link>and@import(and all sorts of combinations of them) called "don’t use @import". That title pretty much speaks for itself.Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose
<link>over @importAlso, using the
<link>tag allows you to define "preferred" and alternate stylesheets. You can't do that with@import.
Fonts not working on most browsers
To understand why fonts are not working you must know the limitations of what your coding.
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.
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.
<link rel> with google API and the font did render on Yandex Mobile Browser. It appeared that google link served WOFF 2.0 version of the font and Yandex doesn't support it. Instead I used "Font Squirrel" to generate different font types for maximum support and it works like a charm.
Option 2 is very standard and Option 3 is required.
CSS files support web fonts basically in every browser by naming the font-family declaring the source file.
Do option three first then copy this format into your .css
@font-face { font-family: "Lato Hairline"; src: url('/assets/fonts/Lato-Hai.ttf'); }
Or you can copy that into your <style> @font-face </style> into your .html file
The best way is for me is to include it into my .css file and linking it into my header.
<link href="https://fonts.googleapis.com/css?family=Cairo:700" rel="stylesheet">