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');
}
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');
}
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');
}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!
![How to Validate a URL in PHP? [Easy]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfJ5nSKw71z6ogGtWqjvKxhOmeOjQXh1dFbR8KjIGp9HLKE9BFIoxLTlmcXYtzqkBMVLmJkFWfCk7LtvzL2uVYh7LICK-EM15H56X_arIRccW3hYbBzkf3MAB0k84uKk2Fc5aTEUJOrUM/s72-c/url.jpg)
Posts
No comments:
Post a Comment
** Comments are reviewed, but not delayed posted **