I am trying to embed a font with css #font-face as a light font. It works fine in Firefox, but not in IE11. In IE11 font-weights bold and regular work fine, but not font-weight light. In the following code, the text displays as Oswald regular:
#font-face {
font-family: Oswald;
font-weight: 300;
src: url('oswaldlight.eot');
src: url('oswaldlight.eot?#iefix') format('embedded-opentype'), url('oswaldlight.woff') format('woff'), url('oswaldlight.ttf') format('truetype');
}
div.h-title {
font-size: 62px;
letter-spacing: 3px;
font-family: Oswald, sans-serif;
font-weight: 300;
color: #7a7a7a;
text-transform: uppercase;
line-height: 1.3em;
}
I have reviewed the the following similar posting, but the solution they recommend does not work.
#font-face IE9 font-weight doesn't work
In the following code, the text actually displays as sans-serif:
#font-face {
font-family: Oswald-light;
src: url('oswaldlight.eot');
src: url('oswaldlight.eot?#iefix') format('embedded-opentype'), url('oswaldlight.woff') format('woff'), url('oswaldlight.ttf') format('truetype');
}
div.h-title {
font-size: 62px;
letter-spacing: 3px;
font-family: Oswald-light, sans-serif;
color: #7a7a7a;
text-transform: uppercase;
line-height: 1.3em;
}
Any ideas how I could resolve this?
Related
My custom font doesn't work on different browsers. I imported 3 font weights using #font-face, all of them .tiff. But when I imported other variations (.eot, .woff, .woff2, .svg) all the text goes bold.
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-weight: lighter;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-weight: normal;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-weight: bolder;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bicyclette', Helvetica, sans-serif;
}
I also added Helvetica as a secondary font, but most browsers display it as Arial.
My website is deployed at novarion.ro.
My questions are: how can I make my custom font work on most browsers? And if that doesn't work, is there a way to keep it always Helvetica as the second option?
Using numeric font-weight seems to be more robust.
You might also add a font-style value if there are any italic styles in your html/css:
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Italic.ttf') format('truetype');
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-style: normal;
font-weight: 700;
}
body{
font-family: 'Bicyclette', Helvetica, sans-serif;
}
h1{
font-weight:700;
}
.light{
font-weight:300;
}
Besides, make sure all font-files are properly loaded (check your dev tool's console for 404s).
Helvetica Fallback
Provided, there is some Helvetica installed on a system - font-family names can be quite different.
You could add alternative font-family names as described by Chris Coyier: Better Helvetica
to make the browser search for several font names.
body {
font-family: Bicyclette, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
However, this approach merely improves your chances of seeing a proper Helvetica, if one is available.
I'm trying to use the following CSS that adds a font family with six different font-weights.
#font-face { font-family: myFont; font-weight: Thin; src: url('../fonts/myFont-Thin.ttf'); }
#font-face { font-family: myFont; font-weight: Light; src: url('../fonts/myFont-Light.ttf'); }
#font-face { font-family: myFont; font-weight: Medium; src: url('../fonts/myFont-Medium.ttf'); }
#font-face { font-family: myFont; font-weight: Regular; src: url('../fonts/myFont-Regular.ttf'); }
#font-face { font-family: myFont; font-weight: Bold; src: url('../fonts/myFont-Bold.ttf'); }
#font-face { font-family: myFont; font-weight: Black; src: url('../fonts/myFont-Black.ttf'); }
.myClass{
font-family: myFont, sans-serif;
font-weight: Medium;
}
When I try to use the class myClass, it uses the myFont-Bold.ttf with a font-weight of 400 instead of using the myFont-Medium.ttf with a font-weight of 400. Inside of the developer tools, I'm able to see it's only loaded two font-weights of my font: Bold and Black. When I delete the line for the black font-weight, it then loads in Regular and Bold. Why is it only loading two font-weights instead of all of them?
You're using invalid font-weight keywords. (See MDN: font-weight)
Style names like "light" or "medium" are commonly used in desktop environments (e.g using a graphic application) – these style names are actually stored in a font file (at least in formats like truetype/ttf).
However, browsers can't use these internally stored style names and need an explicit style/weight mapping like so:
#font-face {
font-family: myFont;
font-weight: 100;
font-style: normal;
src: url("../fonts/myFont-Thin.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 300;
font-style: normal;
src: url("../fonts/myFont-Light.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 500;
font-style: normal;
src: url("../fonts/myFont-Medium.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 400;
font-style: normal;
src: url("../fonts/myFont-Regular.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 700;
font-style: normal;
src: url("../fonts/myFont-Bold.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 900;
font-style: normal;
src: url("../fonts/myFont-Black.ttf") format('truetype');
}
body {
font-family: myFont, sans-serif;
}
.thin {
font-weight: 100;
}
.medium {
font-weight: 500;
}
.black {
font-weight: 900;
}
I strongly recommend using numeric font-weight values for better compatibility as well as specifying the format like format('truetype')
You should also include a font-style to map normal and italic styles.
I am using footable in my rails application.I implemented sorting and pagination for a page.Sorting and pagination working fine.But sortable glyphicon icon not showing on table headers.
I have included
In style sheets
footable.core.css
fonts
footable.eot
footable.svg
footable.woff
footable.ttf
In javascript directory
footable.all.min.js
But I didnt get those icons.Is there anything I am missing.Help me.
Hei there, I had the same problem. I just used the predefined Glyphicons instead of the footable ones and it worked.
In the footable.core.css modify like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('~/fonts/glyphicons-halflings-regular.eot');
src: url('~/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('~/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('~/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('~/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: 'Glyphicons Halflings';
src: url('~/fonts/glyphicons-halflings-regular.svg#footable') format('svg');
font-weight: normal;
font-style: normal;
}
}
.footable.breakpoint > tbody > tr > td > span.footable-toggle {
display: inline-block;
font-family: 'Glyphicons Halflings';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
padding-right: 10px;
text-align:center;
font-size: 14px;
color: #888888;
}
.footable > thead > tr > th > span.footable-sort-indicator {
display: inline-block;
font-family: 'Glyphicons Halflings';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
padding-left: 5px;
}
And voila! It should work. In the code above i just show the snippets that had been modified. For the glyphicons just search "bootstrap glyphicons hex" and will find the codes for any icon you wanna use.
I'm using #font-face to define my own font:
#font-face{
font-family: HelveticaNeue;
src: url('fonts/helvlight_regular-webfont.eot');
src: local("☺");
src: url('fonts/helvlight_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helvlight_regular-webfont.woff') format('woff'),
url('fonts/helvlight_regular-webfont.ttf') format('truetype'),
url('fonts/helvlight_regular-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: HelveticaNeue;
src: url('fonts/helvlight_bold-webfont.eot');
src: local("☺");
src: url('fonts/helvlight_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helvlight_bold-webfont.woff') format('woff'),
url('fonts/helvetica_bold-webfont.ttf') format('truetype'),
url('fonts/helvlight_bold-webfont.svg#webfont') format('svg');
font-weight: bold;
font-style: normal;
}
font-face rules was generated on Font Squirrel and afterwards I added font-weight and font-style rules. I use my custom font in CSS like this:
body {
font: 16px HelveticaNeue, Verdana, sans-serif;
color: black;
}
h1 {
font-weight: bold;
font-size: 2em;
}
and it works fine in Chrome, Firefox, Opera and Safari but it doesn't work in Internet Explorer.
I tried this #font-face works in IE8 but not IE9 to no success.
I also tried to change font-face name of bold style to HelveticaNeueBold and use it like:
h1 {
font-family: HelveticaNeueBold;
font-size: 2em;
}
and it works but this is not what I want of course. Also adding !important after bold didn't help. Any suggestions what I'm doing wrong?
IE doesn't support using a different font-weight than was specified in a #font-face rule.
You can read more about this here: #font-face IE9 font-weight doesn't work
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
And that's how it looks on my website :
Any ideas?
Looks like the browser is trying to display the font bold and repeating the gray pixels (from the thin lines) next to each other. Try using font-weight: normal (The font-weight:bold is inherited from the h1 element).