I use google webfonts frequently with my website projects but I'm having a peculiar issue that I'm not sure how to cure.
On all of my browsers (FF,Chrome and Safari on OS X 10.8.2) the Open Sans regular font weight (400) is displaying as semi-bold. Here is an example of it even happening on google's webfont library: http://i.imgur.com/sZtWW.png
To make sure it's an issue on my end, I loaded up the page in browserstack. In the browserstack instance it displayed the correct font weight (Chrome 23 on Win 7).
Does anyone have any idea what the problem is?
Your locally installed version of the Open Sans font is overriding that specified in the page's CSS.
Google's default rules to copy and paste from its site will give precedence to the local font.
To ensure the CSS-specified font takes precedence, use this CSS directive:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Related
I only want to use a font (and have the browser download it) if the OS the browser is on doesn't have that font built in. Is this possible?
Currently, I define the font with #font-face but this causes the broswer to download the font automatically. I only want that to happen if that font is not already on the system.
In the #font-face, specify a local source, e.g.
#font-face {
font-family: Open Sans;
src: local('Open Sans'), url('../fonts/open-sans.woff') format('woff');
}
Note that users may have broken local fonts.
Do browsers ignore #font-face if they determine that a CSS-imported font is already installed on the client OS?
I have a number of uncommon fonts installed on my system for design, etc. It would appear that browsers render these fonts with slight differences, depending on whether or not they are installed on the client OS. My guess is that the browser ignores the CSS font import if it determines that the font is already installed on the client OS.
The problem with this is that these rendering distinctions, however slight, can affect spacing, positioning and alignments, causing me to see a different version of a page than visitors. I have to uninstall the font (a pain to do every time) or preview it in a virtual machine (less of a pain, but still a pain).
Is there any way I can tell CSS, "only use this specific font from the CSS import and ignore the font installed on the client OS?"
EDIT : This seems to resolve the issue:
Ensure the CSS #font-face specification uses a different string for font-family than what is installed on the system.
When referencing the font elsewhere in CSS, use:
font-family: System Installed Font Name, 'Imported Font Name', Fallback Font;
From the edit in my question:
This seems to resolve the issue:
Ensure the CSS #font-face specification uses a different string for font-family than what is installed on the system.
When referencing the font elsewhere in CSS, use:
font-family: System Installed Font Name, 'Imported Font Name', Fallback Font;
Make sure you take in account font variations (bold, italic).
I solved it this way:
#font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-BoldOblique.ttf");
font-weight: bold;
font-style: italic, oblique;
}
#font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-Oblique.ttf");
font-style: italic, oblique;
}
#font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-Bold.ttf");
font-weight: bold;
}
#font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono.ttf");
}
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.
I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
then it all works fine for Chrome and Firefox.
Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains #font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)
Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).
Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.
Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.
I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF
Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.
The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/Philosopher-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
it worked just fine.
When using Google Web Fonts on Chrome under windows 7, the fonts seem to render incorrectly, while on a Mac OSX (on Chrome, Safari and Firefox) it looks fine. Is there a way to prevent this via CSS or HTML?
The site introducing this behavior can be found here (it might take a while until it loads).
Here's a snapshot showing this:
Alright so this has to do with the way Chrome renders fonts in windows. There is a tool you can use called MacType which changes the rendering engine that windows uses to render fonts.
You can download it here: https://code.google.com/p/mactype/
From everything that i have researched, with google web fonts on windows there currently does not exist a way to fix this issue.
Its simply by design how it works.
You can follow the issue on Chromiums Google Code site..
https://code.google.com/p/chromium/issues/detail?id=137692
heres a snip from the above link that goes in to more detail
As I understand it: the main problem is the fact that Chrome continues
to use the old Windows GDI for rendering fonts, and it looks poor. All
other modern browsers (except Opera) have switched to using
DirectWrite on Windows, resulting in much better font rendering,
leaving Chrome lagging.
If you look back at older versions of IE and Firefox you'll see their
font rendering a few years ago looked exactly the same as Chrome's
does today on Windows. People just didn't notice as much back then as
nobody was using web fonts; when you're using Arial, Verdana etc they
look OK because those fonts have been carefully designed and hinted to
work well with the GDI engine. Most web fonts have not.
for developers, one work around is to put SVG first, doubt this is proper though
-before--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
-after--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I found some solution here and it works for me
Have added a temporary fix with the following code...
$('body')
.delay(500)
.queue(
function(next){
$(this).css('padding-right', '1px');
}
);
Present I see lot of web sites use true type fonts. I want to to know how to use true type fonts in our applications and does it affect the load time of the pages ?
HTML5 allows to use TTF fonts in your CSS:
#font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
To use it:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
Check more information in html5rocks.
I want to update the accepted answer due to a significant passage of time. The following is what Font Squirrel outputs under their recommended 'Optimal' setting. Supporting .ttf at this point is no longer important and should be ignored.
font-family: 'Tagesschrift';
src: url('tagesschrift.woff2') format('woff2'),
url('tagesschrift.woff') format('woff');
font-weight: normal;
font-style: normal;
You use Font Embedding.
It will affect the overall load time of the page as the font data has to be downloaded as well as the other content, styles etc. However, it will be cached so only impacts on the first view of the page.
Font embedding can be a bit complicated due to browser compatibility issues. For example, Safari only supports SVG fonts. IE only supports .eot, which must first be converted from .ttf
I have found the easiest way to use custom fonts is with Google Fonts
Besides having the free google font directory to choose from, there are a few providers that provide a much wider selection of fonts for free and to purchase.