Font issue in Google Chrome [duplicate] - html

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

Related

How do I specify that "bold" should be "Avenir Heavy" not "Avenir Black"?

I need to send HTML-formatted email using the Avenir font (if it's present in the OS). Two of this font's weights are Heavy and Black (the latter being the heaviest weight). I want mail clients to use Avenir Heavy for bold text, but they're using Avenir Black instead.
In my HTML I have a <style type="text/css"> tag with:
body {
font-family: Avenir, Helvetica, Arial, sans-serif;
}
.font_h1 {
font-weight: bold;
}
When I open my HTML file in a desktop browser (Firefox, Chrome, or Safari), it uses Avenir Heavy as the bold font. But when I email it and view it in Mac Outlook 2016 or in iOS 10's Mail client, those display the bold font with Avenir Black, which is a much heavier font. Same thing happens if I specify the font-weight as bolder.
Oddly, if I say:
body {
font-family: Avenir Heavy;
}
then the page is still rendered by desktop browsers with Avenir Medium, with Avenir Heavy used for bold.
I don't think that #font-face is my answer, because I'm not loading a font from a URL.
How can I tell the browser or mail client to specifically use Avenir Heavy as the bold weight?
I declare Avenir like this:
#font-face {
font-family: 'Avenir';
font-weight: 300;
font-style: normal;
src: local('Avenir Book'), local('Avenir-300'),
url('../../assets/fonts/Avenir-Book/Avenir-Book.eot') format('embedded-opentype'),
url('../../assets/fonts/Avenir-Book/Avenir-Book.woff') format('woff'),
url('../../assets/fonts/Avenir-Book/Avenir-Book.ttf') format('truetype');
}
#font-face {
font-family: 'Avenir';
font-weight: 500;
font-style: normal;
src: local('Avenir Medium'), local('Avenir-500'),
url('../../assets/fonts/Avenir-Medium/Avenir-Medium.eot') format('embedded-opentype'),
url('../../assets/fonts/Avenir-Medium/Avenir-Medium.woff') format('woff'),
url('../../assets/fonts/Avenir-Medium/Avenir-Medium.ttf') format('truetype');
}
#font-face {
font-family: 'Avenir';
font-weight: 700;
font-style: normal;
src: local('Avenir Heavy'), local('Avenir-700'),
url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.eot') format('embedded-opentype'),
url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.woff') format('woff'),
url('../../assets/fonts/Avenir-Heavy/Avenir-Heavy.ttf') format('truetype');
}
#font-face {
font-family: 'Avenir';
font-weight: 900;
font-style: normal;
src: local('Avenir Black'), local('Avenir-900'),
url('../../assets/fonts/Avenir-Black/Avenir-Black.eot') format('embedded-opentype'),
url('../../assets/fonts/Avenir-Black/Avenir-Black.woff') format('woff'),
url('../../assets/fonts/Avenir-Black/Avenir-Black.ttf') format('truetype');
}
And then in CSS:
body {
font-family: Avenir, Helvetica, Arial, sans-serif;
}
h1 {
font-weight: 900; // black
}
h2 {
font-weight: 700; // heavy
}
h3 {
font-weight: 500; // medium
}
...
I think you need to explicitly open the font (using a font processing app, such as fontforge) and check which family it belongs to. Then use that family name and you'll be home safe. Also, if you want to be precise about your weights, use numbered values such as
400 for normal
700 for bold
900 for black
etc.

What can be the reason for #font-face failing to work?

I have a simple example, where for some reason definition of #font-face will work only for Chrome and fails to work in FireFox, Safari and IE:
https://jsfiddle.net/d8e6xz7e/1/
HTML:
<body>
<div class="original-font">
This is the original font
</div>
<div class="bold-font">
This should be bold! But it is not in IE, Safari and FireFox
</div>
</body>
CSS:
#font-face {
font-family: 'Lucida Bold Italic';
font-style: italic;
font-weight: bold;
src: local('Lucida Sans Unicode'), local('Times New Roman');
}
.original-font {
font-family: 'Lucida Sans Unicode';
}
.bold-font {
font-family: 'Lucida Bold Italic';
}
According to the specification (https://developer.mozilla.org/en/docs/Web/CSS/#font-face) it should be supported for the modern browsers. That is why, I suspect that there is something missing in the css definition.
Would be grateful for any advice!
You're most likely confusing a font face with a font family:
"Lucida Sans Unicode" is a font family
"Lucida Bold Italic" is a font face
In short, a font family is a group of font faces.
#font-face declares a font face joining some custom family. src is the path to a font face file, and that is likely where the problem is:
src: local('Lucida Sans Unicode'), local('Times New Roman');
That's two font families being used as the src of a font face.
Presumably Chrome handles this easily made mistake and uses the 'normal' font face from the family whenever it spots that this has happened.
So, what you probably meant was this:
#font-face {
font-family: 'MyBoldFont';
font-style: italic;
font-weight: bold;
src: local('Lucida Bold Italic'), local('Times New Roman Bold Italic');
}
.bold-font {
font-family: 'MyBoldFont';
}
Whenever the text is bold, italic and uses .bold-font, you'll see your custom font face show up, like this simple example:
<b><i class='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.
Here it is as a fiddle.
#font-face {
font-family: myFirstFont;
src: url(font.woff);
}

Why my CSS looks different than your CSS?

I wanted to have a page of mine the same textual style as this beautiful text, Dan Wahiln's AngularJS tutorial
So in Chrome Dev Tools: I can see the following:
font-size: 12pt;
line-height: 1.8em;
font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;
Please see the image below:
Now to my CSS:
p.test-fonts {
font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;
font-size: 12pt;
line-height: 1.8em;
margin: 0 0 10.5px
}
However, the text rendered differently::
Why this difference?
if you look in his source, you'll see he is including the stylesheet:
http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700
which includes:
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local("Open Sans"), local("OpenSans"), url("http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff") format("woff");
}
#font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 400;
src: local("Open Sans Italic"), local("OpenSans-Italic"), url("http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff") format("woff");
}
#font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 700;
src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff") format("woff");
}
Do you have the Open Sans font in your project?
Open-sans is not a browser default font, you need to include it manually, it's a font provided by Google Fonts and therefore you need to call it in your document whereas is from the CSS through #import or inside the DOM in the .html file.
If you go to the GoogleFonts site http://www.google.com/fonts and look for "Open-sans" you'll find all the options there on how to use it, you'll have to choose the weights you want to use and the different styles you want to import as each one of those differences are an actual independent font and so they will weight more as you increase the number of variations available for your site.
ALSO
You are viewing your document loading it from the "file" declaration on your browser, I would recommend you to use a local-machine such as Xampp if you are using Windows in order to not have URL issues when using relative paths on your CSS.

Import html fonts and their style variations?

I'm implementing google's font named Roboto in my site.
I need 2 types : bold and regular.
So I checked both types and pressed the download button :
But in the downloaded rar file I got ALL the font styles ( also ones which I didn't choose) :
Anyway I wanted to test the regular font : (the fonts are now in my site and not being loaded from google).
(I got those other extensions types (eot,woff,svg) using a font converter (http://www.font2web.com/))
So I did :
<style type="text/css">
#font-face {
font-family: 'Roboto';
src: url('/font-face/Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
src: url('/font-face/Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font-face/Regular/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
url('/font-face/Regular/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/font-face/Regular/Roboto-Regularo.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: 'Roboto', sans-serif; }
</style>
Question :
Let's say I want to apply a Roboto bold style to a div.
Should I do it like this :
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
or should I do this ( start all over...)
#font-face {
font-family: 'Roboto-bold';
src: url('/font-face/Regular/Roboto-bold.eot'); /* IE9 Compat Modes */
...
}
and then
div { font-family: 'Roboto-bold', sans-serif; }
This is what you have to do:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
Notice how the same font name is used in both #font-face rules. Now the browser knows that the font "Roboto" exists in two variants. The browser will automatically choose the best variant based on your CSS. So, for example:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
Here the browser chooses the Bold font file. It's all automatic. You just have to make sure that you set up the #font-face rules correctly.
Any reason why you're downloading the font? If you're using it in a web site you can just use the #import code given by Google.
The checkboxes choosing the variations at the beginning only define the import code. If you choose to download the font to your computer it always gives you all variations regardless of the choices you made.
To use the font just include the link to the stylesheet containing the #font-face which google gives you. E.g.
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
or
#import url(http://fonts.googleapis.com/css?family=Roboto);
in your existing stylesheet.
And then it's just a case of setting the font-family for the elements you choose. E.g.
body {
font-family: 'Roboto', sans-serif;
}
Regarding your question :
Yes, you need a separate #font-face for each variation. See example from google
Google example :
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
If you don't include a bold variation for your font the browser will render bolded text as faux-bold instead. This can have variable appearance depending on browser and OS. Likewise for italic and bold-italic.
From your question it looks like your only declaring one font-face rule, related to the Regular version of the Roboto font.
Using the CSS from your question:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
Will result in the browser faux bolding the font. The reason is, the font-face rule hasn't been included for the bold version of the font. Reference here: http://alistapart.com/article/say-no-to-faux-bold
As others (#yotam, etc) have mentioned (regardless of how the fonts are being served) you would need to declare a font-face rule for each font weight.
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
You would then use that font weight as follows:
body {
font-family: Roboto, sans-serif;
font-weight: 400;
}
h1 {
font-family: Roboto, sans-serif;
font-weight: 700;
}
I would stress to use the actual font weight value and not font-weight: bold. As mentioned using font-weight: bold leaves the decision down the the browser.
At some point you may use a font with weights of 700, 900. Say 700 is be bold, 900 extra bold. If your declaring font-weight: bold the 900 weight would be used, which isn't the effect you would want.
You don't have to start all over.. if you got #font-face in your style then all you need to add is font-family like you said.
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
And just for make it clear you can make the font as default by using him in body element like this
body {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
EDIT:
You might considering download your font into your website folder, then instead taking website loading time you'll just have to add the next code to your #font-face:
#font-face {
font-family: 'Roboto';
src: url('fonts/font.ttf'); /* IE9 Compat Modes */
/*....*/
}
The font should be inside fonts folder and he named font.

Segoe UI Light Font Not displaying properly in Google Chrome

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