Coder Tune
helping people learn and earn online

How to use @font-face in a web?

If you want to make your site nice looking you must need to use custom font in your website.  And also important to pixel perfect design.  You can easily use Google web font to go this link  just search your font what you want or you need. If you got correct font just click over quick use symbol.

Next you need to choose the styles and character set. You can use any style and character set.
But remember it your page load time. In right hand side you can see a meter always try to keep it down never cross red signal.

You can add this code using 3 methods..
Standard methods (Means HTML code input). You can add this font in your HTML file.
Example of Standard / HTML method
<link href='' rel='stylesheet' type='text/css'>
@import methods (CSS @import methods)
Example of @import methods
@import url(;
JavaScript Methods
Example of JavaScript Methods
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans::latin' ] }
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

Finally just integrate this font into your css file.
font-family: ‘Open Sans’, sans-serif;

Notice this: Note: I use Open Sans fonts as a example.

Some time some fonts are not found in Google web font. So next what we need to do?
Download any OTF/TTF fonts which need your site. Next you need to convert it EOT, SVG/SVGZ, WOFF/WOFF2
Now create a directory such as font or anything which you want. Than call all of font format in you css file. That it…
Here is example how to call fonts in your CSS file.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

Font Formats Details

OTF/TTF: Open Type Font and True Type Font
EOT:  Embedded Open Type format created by Microsoft over 15 years ago. It’s only capability IE8 browser.
SVG/SVGZ: Scalable Vector Graphics Font. This format is only capable safari for iphone. Recently it also supported by Firefox, IE.
WOFF/WOFF2: Web Open Font Format. This font developed by Mozilla

Leave A Reply

Your email address will not be published.