7

Based on my research, I found that there are 3 ways to do that which are:

  1. @import url ('https://..........'); in CSS
  2. @font-face {fonta-family: 'myfont'; src: url('myfont.tff');} in CSS
  3. <link rel="stylesheet" href="https://.........." type="text/css"/> in HTML

Which 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.

6
  • "am using the 3rd method but the font doesn't work on some mobile browsers." - are you implying that methods #1 and/or #2 do work on mobile browsers?
    – DocRoot
    Aug 25, 2017 at 15:03
  • Both 1. and 3. will use @font-face. Both 1. & 3. should work no problem, otherwise the fonts are not being served correctly, most likely due to incorrect file formats. Aug 25, 2017 at 17:06
  • @DocRoot I did not try method 1 & 2
    – MEGA
    Aug 25, 2017 at 17:22
  • @SimonHayter I am not using local fonts, am using google API as in <link href="https://fonts.googleapis.com/css?family=Cairo:700" rel="stylesheet">
    – MEGA
    Aug 25, 2017 at 17:23
  • 1
    @Iwrestledabearonce. yes, I have just implemented this method and now it works on mobile. thanks.
    – MEGA
    Aug 25, 2017 at 19:27

2 Answers 2

7

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 @import is 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 @import

Also, 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.

  • 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.

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.

2
  • Thanks @SimonHayter for your helpful input. I have used <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.
    – MEGA
    Aug 26, 2017 at 8:21
  • Yep and both Font Squirrel, Adobe Typekit, Google fonts all in @Font-face :) Aug 26, 2017 at 13:04
0

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.

2
  • Your first sentence "Option 2 is very standard and Option 3 is required." doesn't seem to make sense? If anything it's Option 2 that is required? (This is also formatted as a quote, but I'm struggling to see where it is quoted from, so I assume this is your statement?)
    – DocRoot
    Aug 25, 2017 at 14:59
  • very standard? Lol .. I wasn't aware there were different degrees of standardisation. So is is option 1 just a little bit standard? Aug 25, 2017 at 18:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.