I am developing a website. I'm using a google font to style my page. But it's not displaying correctly. I've read up a bit on faux fonts, but I believe that only applies when the font that is needed is not supplied. I've imported my google font, code is
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wprx7IBmrqA5IG9z8WNe77b9o.woff) format('woff');
}
My CSS for the font is
font-size:30px;
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
But I believe it's displaying a faux font. Here's the difference between an image of what it should look like on the left, and what it's displaying on the right.
My problem http://resource.theboulderdesign.com/400/homebox/gettingcompare.png
I hope someone can solve my problem.
Morgan Kenyon
It's a Chrome/Windows problem. It'll affect the font thickness and letter spacing, but you can add a white text-stroke to smooth it out:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-fill-color: white;
Demo: http://jsfiddle.net/zzmbu/
Here's a screenshot of it:
I've also found that if you add
text-shadow:0px 0px #FF0000;
property to my CSS, it renders correctly. I don't know why though.
Related
<head>
<title>Privacy Policy</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h2>Brief summary of our Privacy Policy</h2>
<div class="text">
<p>We value your privacy.</p>
<h3>General</h3>
CSS
body
{
background-color: black;
font-family: 'Roboto',sans-serif;
color: white;
}
h1 {
color: #fffffe;
font-size: 20pt;
letter-spacing: 0.2pt;
font-weight: 400;
}
h2 {
color: #fffffe;
font-size: 40pt;
text-align: center;
font-weight: 100;
}
1st part of the picture is what my result looks like.
2nd part is where I need to get.
3rd part is from google fonts.
You need to select the 100 font weight.
h2 {
color: #fffffe;
font-size: 40pt;
text-align: center;
font-weight: 100;
}
h1 {
color: #fffffe;
font-size: 20pt;
letter-spacing: 0.2pt;
font-weight: 400;
}
body {
background-color: black;
font-family: 'Roboto', sans-serif;
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
<h1>this is an h1</h1>
<h2>Brief summary of our Privacy Policy</h2>
By default Google Web Fonts only load the weight 400.
You need to specify in the URL the others weights you want by appending them after a colon.
So for your case the url should be :
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
Source : https://developers.google.com/fonts/docs/getting_started
Time to learn a thing about how fonts and CSS work together.
Single font files (so, on modern computers that's individual ttf and otf files, for the web that also includes woff and woff2 files) encode a single weight. A font like "Roboto-Regular" only contains one weight of glyphs, and so if CSS loads just that font, you can change font-weight as much as you want but it'll do nothing, because you haven't told the CSS engine what to do. It just keeps using the same font.
(2018 edit: OpenType now supports variable fonts, meaning that if the font has an fvar table it can be used to render a full spectrum of weights/variation for a typeface. Browser-support for this is still being figured out as of this edit, so that doesn't change the rest of the answer. Yet)
Instead, you need to tell the CSS engine that you need multiple, different, fonts for different weights. Google fonts does this for you if you request different weights (as noted in the other answers) but what really happens is that Google fonts generate CSS like this:
#font-face {
font-family: Roboto;
font-weight: normal;
font-style: normal;
src: url(roboto-regular.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 300;
font-style: normal;
src: url(roboto-light.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 200;
font-style: normal;
src: url(roboto-thin.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 100;
font-style: normal;
src: url(roboto-ultra-thin.woff) format('WOFF')
}
etc.
And because of that, your browser's CSS engine now knows that why you say font-weight: 100, it needs to just that robot-ultra-thin font instead of the regular font.
"But why does this work for things like Times?"
Good question: because system fonts are already large collections of different font files. Note that when you're using CSS, you ask for a font-family. The "family" part is important: you are not asking for individual fonts, you're asking for an entire font family, and by default from that family you're asking for the style:normal, weight:normal version. Your OS is perfectly capable of finding the right single font file to hand to your browser's CSS engine for that purpose, and so when you as for font-family: Times your brower's actually loading Times-regular.ttf or something similar.
But if a font family doesn't have as many weighs as there are CSS weights, then no amount of saying "weight:100" is going to make a font-family without an ultra thin font look ultra thin. If the font resource doesn't exist (either because it literally doesn't exist, or because you forgot to teach CSS what font file you need loaded for a weight:100) the result is undefined, albeit predictable (the browser will end up using the closest matching font it does know about) and you should not be using CSS with undefined behaviour. You're on the hook to make sure it's defined =)
I am using font "Signika" for my web app. The design is provided in Adobe Illustrator files where they have used the font "Signika Semibold".
First method:
I applied font-family: Signika Semibold but it works as semi-bold only on Chrome. Firefox and IE display the text in normal font weight.
JS Fiddle
HTML
<p class="semi">
Abcd Efgh
</p>
CSS
.semi{
font-family:'Signika Semibold';
font-size:14px;
}
Second method:
I applied font-family: Signika and gave font-weight: 500 for semibold. However it appears as bold instead of Semibold on Chrome.
JS Fiddle
HTML
<p class="weight">
Abcd Efgh
</p>
CSS
.weight{
font-family:'Signika';
font-weight:500;
font-size:14px;
}
Is there a workaround for fixing this issue?
Some screenshots would be awesome. Fonts do tend to appear heavier in Webkit browsers because they use sub-pixel antialiasing for font smoothing. Try setting -webkit-font-smoothing: antialiased; and it should start looking similar to how it looks in other browsers.
Have a look at this page for some more details.
There is a caveat to using this though: Generally, you should let the browser handle this. You'll notice that the MDN page mentions this is a non-standard feature.
If you're interested in how these different smoothing techniques produce different outputs, check this out.
SOLUTION
Used google fonts with required styles:Normal(400), semi-bold(600), bold(700))
Link of Google Font
Imported the font by including this code in HEAD section of HTML
<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>
Then in CSS,
For Normal
font-weight:400;
For Semi-bold
font-weight:600;
For Bold
font-weight:700;
By using this method, fonts on all browsers look alike.
Actually, your second JSFiddle had:
font-weight: 600;
Instead of 500.
Here's your fiddle updated.
http://jsfiddle.net/gbj7b1jp/1/
Now it's not bold.
Semibold usaly is font-weight:400;
However You scan specify Your font properties when importing fonts with #font-face:
#font-face {
font-family: Signika;
src: url(SignikaLight.otf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: Signika;
src: url(SignikaRegular.otf);
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: Signika;
src: url(SignikaSemibold.otf);
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: Signika;
src: url(SignikaBold.otf);
font-style: normal;
font-weight: 600;
}
This is a known issue in CSS. Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work. You can have a look on this link(only runs in IE) and identify the best match of font style from the list is the easy hack to this problem.
http://www.cs.tut.fi/~jkorpela/listfonts.html
I am trying to figure out how the Google search box adjusts the Arial font to look the way it does. What I mean by that is, when I try to use Arial on my site at the same font size it seems much thicker then in Google's search box. As far as I can tell there is no way to adjust the font-weight of Arial on Windows. So I was wondering how they get arial to display so thin.
I would like to do this via CSS if possible but other means are ok as well.
Is this what you are looking for?
.google-searchbox-arial{
font-family: arial, sans-serif;
font-kerning: auto;
font-size: 17px;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #222;
}
I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up.
For some reason, the icons seem to have shifted above where they should be and I can't find any way to get them back down into the container. Here is an example of what I am talking about: http://i.imgur.com/RwOKWLp.png
I have set the "background-color" to yellow to highlight my problem.
Here is the HTML for one icon:
<div class="vicon" aria-hidden="true" data-icon=""></div>
Here is the CSS that I am currently working with:
[data-icon]:before {
font-family: 'iconfont';
content: attr(data-icon);
speak: none;
font-size: 100%;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.vicon {
display: inline-block;
font-size: 50px;
margin-top: 1em;
background-color: yellow;
}
#font-face code:
#font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
url('[font_location_on_company_server].woff') format('woff'),
url('[font_location_on_company_server].ttf') format('truetype'),
url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone have any idea why this might be happening?
The problem is not CSS but your font's baseline height (see http://icomoon.io/#docs/font-metrics)
It means the font metrics are wrong. I don't know if you have them changed or if it was a bug from Icomoon but I've been able to export a correct font right now.
Anyway you cannot (or at least you shouldn't) "correct" this with CSS. The best way is to change the font.
On the left is Chrome and on the right is IE9.
As you can see with the image above, even with the Meyer CSS Reset there are yet inconsistencies between browsers. Two examples in this image:
IE9 clearly has a darker font for just about all text.
For whatever reason, the <hr/> tags aren't lining up (but they sure are close) and that throws off the rest of the content.
Is there something more I need to do, other than applying the Meyer CSS Reset to get some more consistency between these browsers?
Additionally, with the content you see above, other than colors and font sizes, there are no margins or padding applied after the reset.
CSS
h1 {
font-family: Lato;
font-size: 26px;
font-weight: normal;
color: #154995;
}
h2 {
font-family: Lato;
font-size: 24px;
font-weight: normal;
color: #333333;
}
h3 {
font-family: Lato;
font-size: 20px;
font-weight: normal;
color: #154995;
}
h4 {
font-family: Lato;
font-size: 18px;
font-weight: bold;
color: #333333;
}
h5 {
font-family: Lato;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.small-text {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: regular;
color: #333333;
}
The differences you point out are all based on the fact that two different fonts are being used in your chrome and IE9 outputs. Once you tweak the css font-family so both browsers use the same font then it should be ok.
UPDATE:
After seeing your css, you're specifying only Lato font for your elements, it seems both chrome and IE9 can't find the font Lato so both are applying a default font, which is different from one to another, try specifying fallback fonts like:
font-family: Lato, Arial, sans-serif;
If above still give you different outputs then Lato is being picked in one browser and not other, you can check that by using:
font-family: Arial, sans-serif;
for all your elements and see the output is the same on both browsers.
UPDATE 2:
Also see instructions on how to add a Lato webfont to your website:
http://www.google.com/webfonts#UsePlace:use/Collection:Lato
According to me font-family you are using is probably not a system font, it's a web font so what's the thing here is 1 browser is taking up the web font and other is not, so the default Times New Roman font is used