Header-Ad

PHP,Joomla,WordPress & Linux based server management, error resolutions and fixing problems.

Monday, November 14, 2016

How to use External fonts in CSS? @font-face,.WOFF,.TTF. [Solved]

This is the method with the deepest support possible right now. The @font-facerule should be added to the stylesheet before any styles.
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); 
  src: url('webfont.eot?#iefix') format('embedded-opentype'), 
       url('webfont.woff2') format('woff2'), 
       url('webfont.woff') format('woff'), 
       url('webfont.ttf')  format('truetype'), 
       url('webfont.svg#svgFontName') format('svg'); 
}
Then use it to style elements like this:
body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

The WOFF Support: 

Things are shifting heavily toward WOFF and WOFF 2, so we can probably get away with:
@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}
Chrome Safari Firefox Opera IE Android iOS 5+ 5.1+ 3.6+ 11.50+ 9+ 4.4+ 5.1+

If you need a sort of a happy medium between full support and practical support, this will cover a few more bases:
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}
Chrome Safari Firefox Opera IE Android iOS 3.5+ 3+ 3.5+ 10.1+ 9+ 2.2+ 4.3+


If we're staking the farm on WOFF, then we can expect things to shift toward WOFF2 at some point in time. That means we can live on the bleeding edge with:
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}
Chrome Safari Firefox Opera IE Android iOS 36+ No 35+ with flag 23+ No 37


Other Useful Techniques

@import

While @font-face is excellent for fonts that are hosted on our own servers, there may be situations where a hosted font solution is better. Google Fonts offers this as a way to use their fonts. The following is an example of using @import to load the Open Sans font from Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);
Then we can use it to style elements:
body {
  font-family: 'Open Sans', sans-serif;
}

<link>ing a stylesheet

Similarly, you could link to the same asset as you would any other CSS filter, in the <head> of the HTML document rather than in the CSS. Using the same example from Google Fonts, this is what we would use:
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then, we can style our elements like the other methods:
body {
  font-family: 'Open Sans', sans-serif;
}
Again, this is importing the @font-face rules but, instead of injecting them to our stylesheet, they are added to our HTML <head> instead.
It's about the same thing... both techniques download the assets needed.

Good Luck!