how to use roboto font in css using xhtml - css

Question

I've using xhtml,jsf and primefaces. I've mentioned my styles in css file. I want to add roboto font in my project. So i tried for adding font and got some solution, like adding below line in XHTML
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
But i don't want to add this line http://fonts.googleapis.com/cssto my code.
I want to add it through .CSS and XHTML file except web link.

Answer 1

Google Fonts offers three distinct ways to embed fonts, all of which are clearly described on their Quick Use page:
Standard
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
#import
#import url(http://fonts.googleapis.com/css?family=Roboto);
JavaScript
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Roboto::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
These are the only ways to include them — or any web font for that matter.
You could go the route of using a Data URI for the font files
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(data:application/octet-stream;charset=utf-8;base64,<YOUR_BASE_64_ENCODED_FILES_SOURCE>) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
but that's highly discouraged as it would add unnecessary bloat to your page. Also, I'm not sure what the expected benefits of this approach would be in your case. It's usually only useful for very small binary files (~1-2k).