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 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.
Also, if .WOFF type is not available is using .TFF works fine? or I need to convert it to .WOFF?
The easiest option is to upload your font to the font generator at font-squirrell and let it produce all the code (and font-types) that you need and then copy and paste into your external stylesheet as required.
There are too many ‘gotchas’ with custom fonts so use the tried and tested methods such as offered by font-squirrell and the like.
You must ensure you have a license for the font that you are using (not just a licence for local use) and you need a good quality font or it may not work properly cross browser. IOS particularly does not like some custom fonts so you have to choose carefully.
Excerpt:
> we at Booking.com got to thinking about our own long-established font choices.
For a very long time we had been serving a pretty standard font-stack — Helvetica, Arial, Sans-serif — safe in the knowledge that this selection would give us a trouble-free, albeit uninspired, font in which to render our desktop website.
>
Over the years, occasional tests with alternative web fonts have shown that on a site as complex as ours, with a truly global audience and content in more than 40 languages, the performance hit that comes with loading external web fonts would always negate the benefits of improved type. Even if our type was more legible, better suited for the screen and more pleasing to the eye, the extra weight it added to the page was too high a cost for our users and our business.
@PaulOB Thanks for your helpful input.
I have used Font Squirrel to generate different formats of the font and followed the proper steps to add it into CSS. Now the font renders properly on different devices.
What I meant by custom font is that it is not a system font, it is standard in appearance. Using it for all the text on my site.
