If I download and use this font on my web page, will it be able to render correctly on all browsers? I have checked on Google Chrome and it is not on the list of default fonts installed.
If not, is there an alternative that can be used so my web page will be able to render properly on all the browsers and operating systems?
You need to include a web-font in order to ensure your page renders the same on all browsers. A good repository of web-fonts can be found here:
http://www.google.com/fonts/
https://edgewebfonts.adobe.com/
If you own a licence which permits you to use the font on a website, you can use the following converter to change your font into a web format
http://www.fontsquirrel.com/tools/webfont-generator
An example of including and using a web-font :
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
CSS
body {
font-family: 'Open Sans', sans-serif;
}
Related
On page load in IE, the page is displayed for a fraction of second with no custom font, then it renders fine. But this behavior is not in Chrome. Any suggestion how to prevent it.
Thanks
Use always google fonts for websites in this way.
Add in Html
<head>
<title>Website Name</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
Add in CSS
body{
font-family: 'Open Sans', sans-serif;
}
font loading speed depend on the size of the font, your browser cache, and the bandwidth of your network.
that aside, why there is no problem in chrome? it might be because of the way the browser was designed. IE is old, and I bet that your chrome is brand new. so it might be that chrome has a better thread management than IE.
what to do to minimize the effect? you can try to reduce the size of your font. for example, if you use the font for icons, then you can remove the icons that you are not using.
another way is to use windows build in fonts for display in IE, that way, the browser does not need to download fonts. for example, you can use century gothic, impact, or calibri
I have installed google font roboto on my machine, I am also including
<link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesheet' type='text/css'>
in tag of my welcome.html file .
and in css file I am using css like
.mycss{
font-family: "robotoregular","sans-serif","arial";
font-size: 13px;
}
Its working fine in development mode, but when I deploy it on tomcat font size is 2-3px large than development mode. I don't know why its coming. can somebody help me to get out of this? Also how to import Google font in gwt.
Thanks,
First of all, it should be:
font-family: "Roboto", sans-serif;
You can include Google font in your GWT html file the same way as you did for your welcome.html. This is the link that Google recommends (you can choose your own font weights, of course):
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
I am already using a font from google, and it works as expected :
#font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 900;
src: local('Chivo Black'), url(http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
Now I need another font from google and I don't know where to pick that url. The only url I can see on google fonts is (e.g for this font) is:
<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
But the googleapis url does not work, if I replace the src with that url no font is loaded.
To locate all of the Google fonts you can go here:
http://www.google.com/fonts
Using # font-face with google fonts is not recommended...
They will (and should) host all of the "google" fonts for you. Having you host them in a new location is simply bad form... If another user visited a site with the same font, but served up form google, they would have to do a new server call to YOUR location...rather than use the cashed version google has.
To use multiple fonts, place a pipe character (Shift + Backslash = | ) in between the names in the link tag:
<link href='http://fonts.googleapis.com/css?family=Audiowide|Exo+2|Rambla|Scada' rel='stylesheet' type='text/css'>
And then to your font family tags can call the appropriate fonts as needed:
font-family: 'Audiowide', cursive;
font-family: 'Exo 2', sans-serif;
font-family: 'Rambla', sans-serif;
font-family: 'Scada', sans-serif;
You code only works for browsers that support WOFF for downloadable fonts. This is a direct consequence of just ripping off some code sent by the Google server to some browser. The Google server sends different CSS code to different browsers, and your code breaks this. Moreover, there is no guarantee that the URLs will keep working. URLs like
http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff should not be expected to be stable, and Google has made no statement about supporting the use of such URLs.
You can proceed with the rip-off strategy, with its drawbacks, by simply viewing, in your browser, the CSS code of a page. For example, on Firefox, you could use the Web Developer Extension, which has a command for viewing all CSS files for a page. Then you would copy the content of the relevant CSS file.
A better approach—assuming you don’t want to use fonts as hosted by Google—is to download the font files from Google (the Google Web Fonts pages have an interface for that, too, though they keep telling you don’t need to use it) and then generate the various font formats and a CSS file e.g. with FontSquirrel WebFont Generator. The results may differ from those you get by using Google-hosted fonts; Google does not disclose exactly how their font files have been generated.
I'm using the import thing in my CSS, like this
#import url(http://fonts.googleapis.com/css?family=Kite+One);
But the font doesn't load all the time. I'm still working on the CSS and refreshing periodically. Is it because of that? Is there any way to fix this?
Instead of #import, you should add a link to your page by..
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
Then, add the font under the body element in your stylesheet using font-family.
For Instance,
body{font-family: 'Kite One', sans-serif;}
For further doubts, refer here.
It should work now.
If you are having issues with Web fonts, you need to take a look at this
Web Font Loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers. It was co-developed by Google and Typekit.
I have recently struggled with achieving smooth Google Web Fonts, primarily on Windows Google Chrome.
I had previously been using the direct stylesheet code, ripped from the URL that Google Web Fonts supplies, eg., Google supplies:
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>
So I go to the URL and use the following code
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 200;
src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}
I figured this was a cheeky way to save a little more speed rather than making a request to Google, which then appears to make another request to source the font.
I recently discovered that this was the cause of the rendering issues (see the following example for how the Windows Chrome browser renders on the Web Font page, compared to a test page I created using the process: http://imgur.com/OV2U1,ema2B)
My question is, why does the <link /> version make the font smooth, when it is sourcing the same font with my shorthand method? And also, is there any reason why I should be using this approach, which I figured would cut request times?
There are a few issues that may answer your question. The main one is that the linked URL actually displays different CSS for different browsers. So if you open it in Chrome and copy that CSS then it may not work in Internet Explorer (particularly pre version 9).
Also, you are using a font weight of 200, which is a "light" weight. The default of regular text is 400. So there is a small chance that certain browsers simply don't show the font unless you specify a font weight of 200. Something like this should help:
body {
font-family: "Titillium Web", sans-serif;
font-weight: 200;
}
Add this to your CSS-file:
#import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');