I'm starting a website build for a small business that uses Calibri as the primary font for their branding and I have come across an issue with using this font in certain web browsers.
In Google Chrome and Opera, the letters "ti" appear to be joined. When I apply some letter-spacing, they will not separate. This doesn't happen in Mozilla Firefox or Microsoft Edge.
Is there an issue with the font, or is it the browser?
Is there anything I can do to fix it?
I've created a snippet for testing (or you can test at https://codepen.io/whitenoise83/pen/KyXWWL)
#site-title {
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
color: #e00b00;
font-size: 6em;
font-weight: bold;
/*letter-spacing: 0.25em;*/
}
<span id="site-title">Audiomation</span>
You can use font-variant-ligatures: none; in your CSS to prevent the browser using special ligature characters for some combinations of characters/letters.
See also this article: http://www.cssportal.com/css-properties/font-variant-ligatures.php
#site-title {
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
font-variant-ligatures: none;
color: #e00b00;
font-size: 6em;
font-weight: bold;
letter-spacing: 0.05em;
}
<span id="site-title">Audiomation</span>
Never seen that but after some search :
Maybe a font ligature option to choose ?
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures
Hope its help ;)
Related
For the sake of design I like to use very large fonts in headings (around 70 - 85 px) To prevent that from overwhelming the page I need a really thin font. I found Poiret One on google fonts and it is categorized as a cursive family. It is a very thin, very elegant font but the default in the cursive family seems to be comic sans which is just the opposite -- very clunky, bold, and unattractive in large headings. In my css file I have:
h1 {
font-family: 'Poiret One', cursive;
font-weight: 100;
font-size: 85px;
color: #99ccff;
}
I would like to add courier new as a user default font as it is the thinnest of the web safe fonts and add the following attributes to make the character spacing similar to Poiret One so that I don't overflow my bootstrap columns:
font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;
What is the css I can use to tell the browser if Poiret One cannot be viewed by the user, please use courier new with the font modifications as given above?
Looking forward to a solution. Thanks!
Use font-family like this:
font-family: 'Poiret One', cursive, 'Courier New';
When browser doesn't find Poiret One or a cursive font, then it will use Courier New font.
I am using Segoe UI Light font in my website.
the css used is as follows.
.divMainHeader
{
font-family:Segoe UI;
font-size:28pt;
font-weight:lighter;
width:100%
}
But Google Chrome is not rendering this font properly. I am getting a bold font of Segoe UI Light in Chrome.
The Image.
The versions of browsers i'm using.
Internet Explorer : 9
Mozilla Firefox : 21
Google Chrome : 27
Its difficult to get this working in Firefox. Font weight 300 doesnt work few time in all versions. The below code worked for me and compatible with all browsers.
font-family: "Segoe UI Light","Segoe UI";
font-weight: 300;
See Here
This is from a HTML5 solution, but it might help you too, as it's also in Visual Studio...
Hovering over the CSS font-weight options will tell you the weight in words (Light, Semi, etc.)
100: Thin
200: Extra Light (Ultra Light)
300: Light
400: Normal
500: Medium
600: Semi Bold (Demi Bold)
700: Bold
800: Extra Bold
Hope it helps.
Follow the below options and add font-weight instead of using semibold or semilight.Just use 'segoe ui' with combination of font-weight.
#font-face {
font-family: "Segoe UI";
font-weight: 200;
src: local("Segoe UI Light");
}
#font-face {
font-family: "Segoe UI";
font-weight: 300;
src: local("Segoe UI Semilight");
}
#font-face {
font-family: "Segoe UI";
font-weight: 400;
src: local("Segoe UI");
}
#font-face {
font-family: "Segoe UI";
font-weight: 600;
src: local("Segoe UI Semibold");
}
#font-face {
font-family: "Segoe UI";
font-weight: 700;
src: local("Segoe UI Bold");
}
#font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 400;
src: local("Segoe UI Italic");
}
#font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 700;
src: local("Segoe UI Bold Italic");
}
Could be because of various reasons:
Perhaps you are using the wrong font format. Chrome supports SVG, WOFF, TTF/OFT.
Taken the a wrong approach towards defining font-weight, which leads the browser to interpret the font-weight property wrongly
Sample: http://pastebin.com/FiGvAfTk
Are you defining your fonts properly?
Interesting ... I'm having almost the reverse problem ... I can get Segoe UI Light to render properly in Chrome and IE 10, but not in FF 21.
In another post some time back, it was suggested to use something similar to what Microsoft uses on their site ...
h1, h2, h3, h4, h5, h6, h7 {
font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
font-weight: 300;
}
For the browsers that don't honor font-weight + the Segoe UI font, specifying Segoe UI Light first seems to guarantee that it renders the lighter weight font.
However, in FF 21, I'm still seeing the normal Segoe UI font regardless of what I try. Firebug indicates that it's choosing the Segoe UI font from the list.
I had a similar issue myself, with the browser only rendering standard Segoe UI as opposed to the lighter version. If you change the font-family to Segoe UI Light it should do what you want.
Please see the revised code below:
.divMainHeader {
font-family:"Segoe UI Light";
font-size:28pt;
font-weight:100;
width:100%
}
#font-face {
font-family: 'Myfont';
font-style: normal;
font-weight: 200;
src: local('Segoe UI Light'), local('SegoeUI-Light');
}
body{
font-family: 'Myfont';
}
this code fixed my problem like yours
I am using Segoe UI Light font in my website.
the css used is as follows.
.divMainHeader
{
font-family:Segoe UI;
font-size:28pt;
font-weight:lighter;
width:100%
}
But Google Chrome is not rendering this font properly. I am getting a bold font of Segoe UI Light in Chrome.
The Image.
The versions of browsers i'm using.
Internet Explorer : 9
Mozilla Firefox : 21
Google Chrome : 27
Its difficult to get this working in Firefox. Font weight 300 doesnt work few time in all versions. The below code worked for me and compatible with all browsers.
font-family: "Segoe UI Light","Segoe UI";
font-weight: 300;
See Here
This is from a HTML5 solution, but it might help you too, as it's also in Visual Studio...
Hovering over the CSS font-weight options will tell you the weight in words (Light, Semi, etc.)
100: Thin
200: Extra Light (Ultra Light)
300: Light
400: Normal
500: Medium
600: Semi Bold (Demi Bold)
700: Bold
800: Extra Bold
Hope it helps.
Follow the below options and add font-weight instead of using semibold or semilight.Just use 'segoe ui' with combination of font-weight.
#font-face {
font-family: "Segoe UI";
font-weight: 200;
src: local("Segoe UI Light");
}
#font-face {
font-family: "Segoe UI";
font-weight: 300;
src: local("Segoe UI Semilight");
}
#font-face {
font-family: "Segoe UI";
font-weight: 400;
src: local("Segoe UI");
}
#font-face {
font-family: "Segoe UI";
font-weight: 600;
src: local("Segoe UI Semibold");
}
#font-face {
font-family: "Segoe UI";
font-weight: 700;
src: local("Segoe UI Bold");
}
#font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 400;
src: local("Segoe UI Italic");
}
#font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 700;
src: local("Segoe UI Bold Italic");
}
Could be because of various reasons:
Perhaps you are using the wrong font format. Chrome supports SVG, WOFF, TTF/OFT.
Taken the a wrong approach towards defining font-weight, which leads the browser to interpret the font-weight property wrongly
Sample: http://pastebin.com/FiGvAfTk
Are you defining your fonts properly?
Interesting ... I'm having almost the reverse problem ... I can get Segoe UI Light to render properly in Chrome and IE 10, but not in FF 21.
In another post some time back, it was suggested to use something similar to what Microsoft uses on their site ...
h1, h2, h3, h4, h5, h6, h7 {
font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
font-weight: 300;
}
For the browsers that don't honor font-weight + the Segoe UI font, specifying Segoe UI Light first seems to guarantee that it renders the lighter weight font.
However, in FF 21, I'm still seeing the normal Segoe UI font regardless of what I try. Firebug indicates that it's choosing the Segoe UI font from the list.
I had a similar issue myself, with the browser only rendering standard Segoe UI as opposed to the lighter version. If you change the font-family to Segoe UI Light it should do what you want.
Please see the revised code below:
.divMainHeader {
font-family:"Segoe UI Light";
font-size:28pt;
font-weight:100;
width:100%
}
#font-face {
font-family: 'Myfont';
font-style: normal;
font-weight: 200;
src: local('Segoe UI Light'), local('SegoeUI-Light');
}
body{
font-family: 'Myfont';
}
this code fixed my problem like yours
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
I'm trying to use the "Helvetica Light" font, which comes bundled with Helvetica. To do this I read that I had to specify "Helvetica Light" AND font-weight: lighter. I've gotten this to work only by doing this (in SASS):
p
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
and in other instances,
h2.light
font: Helvetica, Arial, sans-serif
font-size: 12px
font-weight: lighter
(or with font-family instead of font)
which is really weird and the only combos that works so far (combining all properties into 'font' doesn't work, and calling the font: as font-family: sometimes doesn't work.
In another rule, I wasn't able to get it to work unless I ONLY had font-weight: lighter with no font specified (but it inherited Helvetica).
Now I copied the exact same font styles as the p and put it in an h4 and it no longer works. Wtf? What am I doing wrong/why is this so buggy?
EDIT: THIS IS NOT A SYNTAX PROBLEM. To the answers below, note that I am using SASS. No semicolons and brackets needed. Also the file I am editing is 5k lines long (a hand me down) and grouped into somewhat organized sections. So I'd like to keep the sections intact until I can refactor it, but then I can't group all the p's and h2.lights together since they are in different sections.
Thanks!
Try this.
p
font: 'Helvetica Light', 'Helvetica', Arial, sans-serif
font-size: 12px
font-weight: 100
Just for reference, lighter works relative to the inherited value. It's better to use absolute values.
http://www.w3.org/TR/CSS2/fonts.html#font-boldness
what finally worked for me was to have font-family as Helvetica, and font-weight as lighter (but not the condensed format, which doesn't work).
Note: this answer was written before the OP specified SASS. It applies to CSS only.
A couple of things you should do to clean this up:
Semi-colons
All your CSS rules should end with a semi-colon, such as font-weight:lighter;
Grouping
As you have 2 identical CSS rules, the fastest and most concise way to do it is this:
p,
h2.light,
other_rules {
font: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: lighter;
}
Then for the one rule where you want a different font,
p{ font: "Helvetica Light", Arial, sans-serif; }
Be sure to put your exceptions below the general rules (i.e. in the order I've shown you here) because CSS is implemented in order, and a rule further down the document will take priority.
Try this:
p, h2.light
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
inheritance, establish a base metric typography, so device doesn't crack-up style intersections
body[role="put something here"] h1, p, etc
font-size: 62.5%
Helvetica light, mix with unix-mac-windows-webfont (webfont needs js, may pull you up over edge
font-family
Helvetica Light, Helveticaneue Light, Calibri Light, Helveticaneue, Helvetica, Gill Sans, Myriad Pro, Arial, Lucida Grande, sans-serif
degrade per Meyer, or try just 2 hl, ss... also, check out your mixin
https://github.com/less/less.js/issues/389
Sass for Web Designers by Dan Cedarholm and Chris Coyier