There are several reasons why you might not want to include web fonts from e.g. fonts.googleapis.com on your website. Your vistors can be easily tracked by Google and others. See http://fontfeed.com/archives/google-webfonts-the-spy-inside/ for more details.
An alternative is to host all needed fonts on the same webspace where your website is installed.
Google web fonts are usually included via CSS:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300" />
This adds the following font definition:
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
src: local('Merriweather Light'), local('Merriweather-Light'), url(http://fonts.gstatic.com/s/merriweather/v8/ZvcMqxEwPfh2qDWBPxn6nmB7wJ9CoPCp9n30ZBThZ1I.woff) format('woff');
}
The .woff file referred by the url
parameter is the actual web font.
See the Wikipedia article on WOFF for details about this file format.
You can just download the .woff file and place it on your webspace inside a directory called google_fonts
:
$ mkdir google_fonts
$ cd google_fonts
$ wget http://fonts.gstatic.com/s/merriweather/v8/ZvcMqxEwPfh2qDWBPxn6nmB7wJ9CoPCp9n30ZBThZ1I.woff
Next you can remove the above mentioned referer to the external CSS file and add the font definition into the CSS file of your website:
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
src: local('Merriweather Light'), local('Merriweather-Light'), url(/google_fonts/ZvcMqxEwPfh2qDWBPxn6nmB7wJ9CoPCp9n30ZBThZ1I.woff) format('woff');
}
Finally the web font will be loaded directly from your webspace instead of Google's servers.
Update 23.07.2015: When using Ghost with its Casper default theme, you can add the following to content/themes/casper/assets/css/screen.css:
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
src: local('Merriweather Light'), local('Merriweather-Light'), url(/google_fonts/ZvcMqxEwPfh2qDWBPxn6nmB7wJ9CoPCp9n30ZBThZ1I.woff) format('woff');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
src: local('Merriweather Bold'), local('Merriweather-Bold'), url(/google_fonts/ZvcMqxEwPfh2qDWBPxn6nhAPw1J91axKNXP_-QX9CC8.woff) format('woff');
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 300;
src: local('Merriweather Light Italic'), local('Merriweather-LightItalic'), url(/google_fonts/EYh7Vl4ywhowqULgRdYwIKG6KSkCb3wBFlS6Qx4Mm8U.woff) format('woff');
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
src: local('Merriweather Bold Italic'), local('Merriweather-BoldItalic'), url(/google_fonts/EYh7Vl4ywhowqULgRdYwILz7bF_NE717IFsea40dLmU.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(/google_fonts/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/google_fonts/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}