The title itself declared what is means. If we use a default fonts, it would be like Arial, Tahoma and the others. But if we're using a custom font, out site must using some script to be impemented to our site. So the visitors can see the content with that font too.
EXAMPLE
For an example, wre're gonna using Comfortaa's font with the needs is like this:• Font: Comfortaa
• Setting: light 300
• Characters sets: latin
01. DEFAULT SCRIPT
Originally we're using a markup like these at editing template's page.<link href='http://fonts.googleapis.com/css?family=Comfortaa:300' rel='stylesheet' type='text/css'/>If we're using the script like this, it's means our site will loading every type of Comfortaa's kind, it's have lot of Comforta's size and style even we're just using one kind (see point 1).
First off all save that setting with the script included. Then moving to step 2.
02. SAVE YOUR TEMPLATE
After you pick your fonts, then go to W3C CSS Validator, then validate you site's address at there.And then scroll down and find the @font-face exactly same with your font's name (search with CTRL+F).
Example:
@font-face {
font-family : "'Comfortaa'";
font-style : normal;
font-weight : 300;
src : local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSConF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
03. ERASE THE ("") FOR FIXING ERROR.
Change " to ' :@font-face {
font-family : 'Comfortaa';
font-style : normal;
font-weight : 300;
src : local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSConF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
04. CHANGE YOUR SCRIPT
Take that code and input to your stylesheet area / CSS code. And then delete the first script (Step 1) because we're already have Comfortaa with font-weight 300 only.This way will slightly make your site faster, because you're already minimize the source. Feel free to do another fonts.