I try to install Roboto on my website, using Google Fonts, and I feel desperate to see that Roboto is bolder (much bolder) in Firefox than in Google Chrome.
Here are my codes :
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
And
p
{
font-size: 1.4rem;
line-height: 1.5;
font-family: "Roboto", sans-serif;
letter-spacing: 0;
color: #313131;
}
And here are two preview of Roboto Font, first with Firefox, second with Chrome:
As you can see, the Chrome Roboto is much lighter.
I don't know why it happen, but I've find something on Google Font. Using Firebug on their own code, I discover that the Roboto Font used on their website has attributes :
element.style {
font-family: "Roboto script=all rev=1";
}
And when you remove the "Script=all rev=1", Roboto become much bolder in Firefox and in Chrome (but so much in Firefox). Just like on my Work in progress.
Does somebody have an answer, a solution, or something? I feel lonely to see that not even Google can inform me about what is script=all rev=1 and why it makes Roboto much lighter on Google Font.
The reason it is lighter is because Chrome is using a locally installed Roboto Font which does not have the bold version, and it is thus falling back to the thin version (rather than switching to the web font.) This is arguably a Chrome bug but I don't know of any existing report.
According to Force Chrome to use external font in CSS the special font name works because the Google Web Font stylesheet gives an alternate name for the font "Roboto script=all rev=1", which obviously doesn't exist on the user's local system and thus gets served by web font.
Related
I'm having an issue where font-variant: small-caps isn't rendering correctly in Firefox. Any other browser is fine. I'm stuck with this particular font, and even this particular definition of the face due to its license.
How it looks in Firefox:
How it's supposed to look (from Chrome):
Is this a problem with the encoding of the font? Is there a work-around?
The issue is presented in full in this jsFiddle. (Base64-encoded font was too big to put all in the question.)
The font is broken for those characters. Other browsers fallback to the next font in a different way from Firefox. You can see this by providing an obviously different font as the second font in the font-family. For example, in this JsFiddle, Wingdings is used as the first fallback font. i.e.
body { font-family: "THAT-FONT", Wingdings, "Open Sans", "open-sans", Sans-Serif; }
https://jsfiddle.net/rnwvpfy1/2/
See how Chrome displays that, showing that it's not using the "THAT-FONT" font for the broken characters.
Can someone please help me get a grasp of what's going on with this site in Internet Explorer? I tested the site in every other browser (Safari, Opera, Chrome, Firefox), but I don't have any means of testing in IE.
I put the site on a live testserver for the client to check out, and they're sending me screenshots of broken layouts and missing text sections.
It seems the issue is related to the Google font I'm using. Exchanging the font with Helvetica renders expected results, but whenever the font is active only parts of the websites text renders.
All I've done to use this font is copy paste the Google font:
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,600,400italic,700' rel='stylesheet' type='text/css'>
And I'm using this as my css rule:
font-family: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
EDIT
I managed to finally fix the issue by downloading the "Titillium Web" from Google and converting it to a webfont with fontsquirrel.
IE is still having some issues rendering characters like æøå.
I'm building a website using the Google Webfont 'Varela Round', which obviously only ships with a font-weight of 400. In parts of my website where I wanna have a bold font like in headings or links, I can without any problems assign font-weight: 600; or font-weight: bold; via CSS and it works perfectly.
Only Google Chrome of all browsers doesn't seem to support this and would still render the font with normal weight. Is there any way to achieve a bolder weight in Chrome with this font?
This font is only available in font-weight: 400; and thus Google Chrome only supports this. This browser does not support another font-weight if it is not included.
That's one of the problems of Googel Chrome.
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');
I have an asp.net page with an asp.net menu.
I defined the font in the menu items to be Myriad Pro.
In IE and Firefox it appears normally, but in Safari the menu items appear blank.
when I changed the font type to another font it worked fine.
so is there a way to make the Myriad Pro font appear on Safari.
thanks
As Rup mentioned, Myriad Pro is not a ubiquitously defined Mac font. However, if you have a copy of the .otf or .eot font files, you can make the font available to all CSS3 compliant browsers and supply a backup font for display should the browser not support CSS3. This would be the syntax for doing such:
#font-face {
font-family: "CustomMyriadPro";
src: url("path/to/myriadpro/font.otf") format("opentype");
}
h2 {
font-family: "CustomMyriadPro", Helvetica, Georgia;
}
Make sure your CSS specifies Myriad Pro in quotes, i.e.
font-family: "Myriad Pro", sans-serif;
Secondly, be aware that a font will only appear if it's installed on the end user's machine (unless you're using #font-face), so you always need to define some fall-back fonts, e.g.
font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
This problem is happening with multiple installed fonts on my Mac since the upgrade to 5.1 and then to Lion. I think something is broken with the upgrade. Other browsers are fine. It is affecting other fonts as well. I had to disable the font-family CSS in the Inspector in order to get this editor to include readable text because Consolas is affected as well.
The problem is not with fallback or specification in CSS. The problem is with Safari and specific fonts. It does not fallback past the problematic font but continues using it, replacing all characters with the capital A in a square; so fallback is of no help.
Discussion and possible explanation here: https://discussions.apple.com/thread/3191532?start=0&tstart=0
According to the codestyle.org font survey, most Macs don't have Myriad Pro installed. (Nor Windows for that matter.) You should pick similar fallback fonts for all of Mac, Windows and Linux then specify a list of these fonts in your style.
If you specifically need Myriad Pro then you could use images, or embed the font using sIFR (maybe not for menus though) or through #font-face font-embedding (thanks Olly!) instead.
Check out the Typekit webfont-embedding service, they have Myriad in their library http://typekit.com/fonts/myriad-pro