I am using the Raleway font on my website but unless I have the font installed on my local desktop, it does not display properly. Specifically, the weight is always bold. I've had others report this as well. From what I can tell it's because Google is trying to use my desktop fonts for performance but is there any way to prevent this on my site with either CSS or JS? A solution that wouldn't involve changing browser settings. What's strange is that the fonts are displaying properly on Googles Font library. and yes, I see this issue on other websites that us the Raleway font.
The default Google Font APIs include src: local(<font>), which causes the browser to look for the local files before downloading the web font. If you really want to prevent this, you can create your own #font-face declarations and omit the local directives. Use something like the Google Web Font Loader to get the appropriate #font-face declaration, as the Google Font APIs only return the font files for your specific browser and I assume you want to be compatible with all browsers.
Are you importing just the bold style for Raleway? Check that you have 400 (normal) on the import URL for the font. Should look something like this:
https://fonts.googleapis.com/css?family=Raleway:400,700
(that gives you normal and bold)
It is because you do not select desired font-weight. If you inspect that google css file fonts.googleapis.com/css?family=Raleway:300,400,700 you see that last #font-face have font-weight: 700;. In css last #font-face takes precedence over prior definitions. If you do not specify exact font-weight, browser will choose its default - in your example it is bold (700) because it is defined last.
Related
The font Arial Black is available on the Mac and PC in general, but not on iOS.
Can a webpage use CSS or perhaps some tricks (such as adding a class "mobile" or "ios" to the <body> element), so that "Arial Black" is added for the webpage, preferably so that the Mac and PC don't have to load it but use the native Arial Black font?
It's probably not safe to assume certain systems have or have not got a particular font loaded locally. And browser/system sniffing is very unreliable.
The CSS font-face rule allows you to give a list of places where a font may be and the browser will go down the list until it finds one it can use. So you can start with looking locally and if it's not there load it.
See https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
If the local() function is provided, specifying a font name to look
for on the user's computer, and the user agent finds a match, that
local font is used. Otherwise, the font resource specified using the
url() function is downloaded and used.
It gives this example:
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
Obviously you need to substitute whatever names and urls your particular font has on the various systems.
If I set a Google font as a fallback font like so:
#font-face {
font-family: 'GoogleFont';
src: url('GoogleFont.ttf');
}
html, body {
font-family: 'myMainFont', 'GoogleFont';
}
Will the Google font only be downloaded to the user's browser if the main font fails?
EDIT
According to the spec, #font-face fonts should only be downloaded when they are required to render the document: http://www.w3.org/TR/css3-fonts/#font-face-loading
The #font-face rule is designed to allow lazy loading of font
resources that are only downloaded when used within a document. A
stylesheet can include #font-face rules for a library of fonts of
which only a select set are used; user agents must only download those
fonts that are referred to within the style rules applicable to a
given page. User agents that download all fonts defined in #font-face
rules without considering whether those fonts are in fact used within
a page are considered non-conformant. In cases where a font might be
downloaded in character fallback cases, user agents may download a
font if it's contained within the computed value of ‘font-family’ for
a given text run.
NOTE:
At the time of writing this answer, different versions of browsers on various systems seem to implement this behaviour wildly differently. All we can do is hope that they will eventually conform to the spec.
Chrome and Firefox (testing others in progress) will only download fonts that are required to render the content that is being displayed, regardless as to what's been specified via #font-face. More importantly, if you specify an #font-face font and then don't use it, e.g.
.css-rule { font-family: Helvetica,'My at-font-face-font',sans-serif; }
Then your custom font face will not be downloaded because it does not need to be.
To examine what fonts are being download and when, open up your network tab during a page load.
EDIT
It appears that the behavior of browsers varies greatly on this issue and I encourage more looking into your individual circumstances.
I can guarantee one thing, however, and that is not all fonts are downloaded all the time in all browsers, just because you've declared them via #font-face.
No: browser implementation varies so you can't trust that fonts will be ignored (even if they are not needed).
The client's OS, browser, and version all cause variant performance -- as do other settings browsers may offer. See Adam's answer about browser compliance for W3's "rule."
Check the resources that get downloaded in your browser here and here in different browsers to see how fonts are treated.
That being said, according to the MDN documentation you can have the "fallback" behavior you're looking for if you specify multiple files in the#font-face src attribute:
#font-face {
font-family: MyFontName;
src: url("MyMainFont.tff"), url("MyBackupFont.ttf");
}
In this example, if the first file isn't found, then we continue down the src list until we find a valid file. Thus, MyBackupFont.tff is only downloaded if MyMainfont.tff can't be found. You can also specify local files in the src by using local("FontName").
By the way, Chris has a great article on how to "use [#font-face] responsibly."
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
I'm trying to make my webpage use the font Segoe Print, which is not a default browser font. I have the ttf file though, is there any way I can employ this .ttf file so that every visitor (no matter what browser) can see the font ?
I searched and found some solutions, one was saying "Convert the font using this site"
but it gives the error:
Microsoft has requested that their font Segoe Print to be blacklisted
by the generator
So how can I use this font on my website ?
I also found a solution that suggests the following CSS rule :
#font-face
{
font-family: myFirstFont;
src: url('Segoe.ttf'),
url('Segoe.eot'); /* IE9 */
}
But, will it work in non-windows browsers? I mean, does the user have to have the ttf file in their computer, or will it be loaded from my website ?
Thanks !
You cannot, in any legal and morally acceptable way. It would be illegal and morally wrong to give advice on committing the crime that such unauthorized use would constitute.
You should thus either abandon the idea or try and find a free font, or a font that may be legally used for a fee, with characteristics sufficiently similar to the font that you want to use.
You can use Kirsle to convert your TTF font to EOT. Then you need to import three format of your font in the top of your CSS, with this format:
#font-face {
font-family: 'Segoe’;
src:url('fonts/Segoe.eot?#’) format(‘eot’),
url(‘fonts/Segoe.woff’) format(‘woff’);
url(‘fonts/Segoe.ttf’) format(‘truetype’);
}
Remeber to have the ?#, it will deceive the IE to only see the first line and download it, as other browsers can't see the first line and will download the TTF format & New browsers will download the WOFF that have a less size, so will download faster.
Simply use font-family: Segoe to change an item's font in your CSS.
Why not buy it? There are reputable sources where you can purchase a license to use this font as a web font.
I have modified the code of someone else who are trying to load three google fonts.
They have 3 css file. Every css file have used one css font from google web fonts. In chrome dev tool I have seen only one fonts work and other 2 not.
it's happen because only one can applied so chrome trying to download one. When they changed the font on dropdown's select change it's not worked because font is even not loaded in chrome.
Because I want to load the font when they changed the dropdown so I write this code:
<div id="hiddenFontLoader"></div>
CSS:
#hiddenFontLoader {
font-family: 'Quicksand', 'Cantarell';
display: none;
}
This code help me to load other 2 fonts that is used nowhere and will be used when dropdown changed.
Now I want to prove that it's working. For me I can just set the font 400% and can check that is working or not.
What is the proper way to test the font is loaded or not. I means if I use fallback fonts then I can't check if all fonts have very small difference and fallback font are very similar to the font I load from Google font.
Suppose I applied to the body{} then how to confirm it's work in chrome dev tool or firebug.
Anybody have trick for it.
You should consider using Google WebFont Loader.
The documentation is very thorough. Specifically, check out the Acting on Events.
https://developers.google.com/webfonts/docs/webfont_loader
I believe you are looking active event (Click Here!).