Best way to add a custom font to my site?

Question

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.

Answer 1

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.

• EOT - Embedded OpenType fonts
• WOFF - Web Open Font Format
• SVG fonts
• TTF/OTF - TrueType and OpenType font support
• WOFF 2.0 - Web Open Font Format

Answer 2

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.