I've recently applied the Arimo font from Google Web Fonts. On almost all modern browsers it looks normally but in Konqueror (KDE 4.10.1) all fonts are bold and italic.
Are there any hacks, or solutions to prevent this behavior?
My <link> to the font is:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic&subset=latin,latin-ext">
Just externally define font-style: normal !important; and font-weight: normal !important; in the css where you are seeing them bold and italic in Konqueror. So it will behave same in all the browsers.
Related
I am loading a font with 3 weights from Google fonts, and I can display properly text in the 3 weights on Firefox and Chrome, but it won't work in Safari:
https://jsfiddle.net/vmarquet/u6ezqbrm/
Is Safari not supporting font-face aliases?
This should work for you: https://jsfiddle.net/7czpo2s3/
When I tested your sample, only the Regular weight displayed in Chrome and Safari. The other #font-face declarations you had might have been using your local copy of the font, if you have it installed, but they wouldn’t work for anyone else who doesn’t have it installed locally.
Because you are using Google Fonts, the #font-face declarations to use the hosted fonts are already written for you. If you go directly to the Google Fonts URL, you’ll see you’re getting a CSS stylesheet with the #font-face declarations already written. The font-family for all the styles is Montserrat. Instead of using the different weights with the font-family name, you want to change it with the font-weight.
Here’s what I changed from your sample:
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap" rel="stylesheet">
<style>
.light,
.regular,
.bold {
font-family: "Montserrat";
}
.light { font-weight: 300; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }
</style>
<div class="regular">Montserrat</div>
<div class="light">Montserrat</div>
<div class="bold">Montserrat</div>
If you do have the Montserrat font installed locally, you might also want to disable it. Then, it will be easier to tell when things are working, as Google Fonts will also use the local fonts if they are available.
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.
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.
My font-awesome icons are working fine in Firefox and Chrome, but in Safari I just see blank space for some of them but not others. Screenshot:
As you can see, the icons for fa-twitter, fa-instagram and others just aren't showing up, either on the Font Awesome website or when I try to use them with <i class="fa fa-instagram"></i>.
Really bizarre, I've cleared my cache a dozen times and can't figure out what else could be going wrong here.
Any ideas?
There may be another issue at play--I was having a similar issue where a custom-generated icon set (using Font Custom) would display in Chrome, Firefox, and some versions of Safari, but no versions of iOS. I made sure I had no popup blockers enabled, but still was experiencing the issue.
Through a bit of research, I found that adding this property to the icon font's CSS fixed the issue:
text-rendering: optimizeLegibility;
After this property was added, rendering in all browsers worked fine.
Do you have an ad blocker plugin installed in Safari?
According to the Font Awesome documentation, icons of social networks can be blocked with such plugin.
It seems Safari blocks unsigned fonts. Using CDN with integrity resolves the issue:
For font awesome I used below link which I found at: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
Are you using the latest version of Chrome? They now have a customized version of web-kit, a branch called Blink so even though they show in Chrome, nowadays, you might need to check in another web-kit browser to be sure.
Also, what the dreaded IE? Do they show there?
I usually have to actually 'Reset Safari' instead of just clearing the cache to actually, clear the cache!
Try this. It works for me.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
src:url('../fonts/fontawesome-webfont.eot #iefix&v=4.4.0') format('embedded-opentype'),
url('../fonts/fontawesome webfont.woff2?v=4.4.0') format('woff2'),
url('../fonts/fontawesome webfont.woff?v=4.4.0') format('woff'),
url('../fonts/fontawesome webfont.ttf?v=4.4.0') format('truetype'),
url('../fonts/fontawesome webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
In my case I had the wrong font family for brand icons.
My old CSS:
font-family: "FontAwesome";
My new (working) CSS:
font-family: "Font Awesome 5 Brands";
font-weight: 900;
This should help anyone who is using old code & has issues displaying brand icons (Twitter, Facebook etc)
Try clearing your Cache, I have had this happen to me once before and it was fixed after I cleared my Cache (I was using Chrome though).
I found that if there is an overriding svg styles of width: auto; height: auto, svg (or font awesome icons) will not show in Safari.
Either set a value for width and height or use width: inherit; height: inherit
I know it's been years, but to anyone who still deal with this issue, you can just add request params "?v=1234" in the href of <link>
Before:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
After:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css?v=1234" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Credits to #animaster for the answer:
https://github.com/FortAwesome/Font-Awesome/issues/7770#issuecomment-346301072
When I design in Photoshop, my fonts are thin and crisp, but when I declare fonts in CSS -- even when using font-weight: lighter -- the fonts always appear bolder.
Maybe this is just how the browser renders the font (In IE fonts stay thin), but I was wondering if there were any tricks or tips for achieving the same thin, crisp looks.
Use CSS to smooth up your fonts...
put this in your CSS:
-webkit-font-smoothing: antialiased;
Font rendering can be complicated. Unfortunately, different browsers will render the same font differently.
As far as CSS goes, setting font-weight:100 ensures the lightest available weight will be used. You may also want to set -webkit-font-smoothing:antialiased.
<style type="text/css">
body {
font-family:"Helvetica Neue", Arial, sans-serif;
font-weight:100;
-webkit-font-smoothing:antialiased;
}
</style>
Helvetica Neue is a very thin font native to OSX.
Your best bet is really http://www.google.com/fonts/
Also noteworthy:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator
You are right, it is a difference in rendering. How the text renders depends on your OS, your settings, and your browser (Safari, for example, renders bolder than IE). So there is no way to make this rendering match your photoshop comp.
A bit more info here:
Browser Choice vs Font Rendering | Phinney on Fonts
I don't believe any one of the universal web fonts has a very thin weight in all browsers. However, there ways of embedding custom fonts in all major browsers now 'days.
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
Any of these tools can get you just about any kind of font you can imagine. Just be careful with copyrights on the last one.