I'm using bootstrap-wysiwyg inside a popover. Here's a demo (only the bold is actually working). Now as you can see - pressing Ctrl+B will set the text to bold, and pressing again will return it to normal.
That demo is working fine, but in my own project I'm working with local font-faces, i.e.:
#font-face {
font-family: BerninaSans;
src: url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.eot');
src: url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.eot?#iefix') format('embedded-opentype'),
url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.woff') format('woff'),
url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.ttf') format('truetype'),
url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.svg#bernina_sanscondensed_regular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: BerninaSansBold;
src: url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.eot');
src: url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.eot?#iefix') format('embedded-opentype'),
url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.woff') format('woff'),
url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.ttf') format('truetype'),
url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.svg#bernina_sanscondensed_bold') format('svg');
font-weight: bold;
font-style: normal;
}
And that somehow screws everything up - I can click Ctrl+B (or the button directly) to make the text bold, but clicking again doesn't return it to normal. It just stays bold. The button itself is behaving weirdly too, turns blue, but changes back to normal the second you press down any other key. I thought setting the font-weight for the second font-face to bold will sort it out because but it doesn't.
I have no idea how to set up that demo to recreate the problem (is there like a... font-face cdn or something?), hopefully someone knows the answer from similar experience or will give a helpful suggestion.
It turns out that I should give them all the same name.
According to this article, the right way to define a bold version for your font-face is to use the same font-family name, but with different attributes. That way, your browser knows that one is a bold version of the other
#font-face {
font-family: BerninaSans;
src: url('...');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: BerninaSans; // <----
src: url('...');
font-weight: bold;
font-style: normal;
}
Pretty neat.
Related
Our custom fonts are loaded but until they are loaded no text is displayed. This also happens with fonts loaded from Google Fonts.
Any idea why this is happening and how to use a fallback?
The following CSS is served:
#font-face {
font-family: 'ProximaNova';
src: url( '/media/fonts/proximanova-bold-webfont.eot');
src: url('/media/fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/media/fonts/proximanova-bold-webfont.woff') format('woff'),
url('/media/fonts/proximanova-bold-webfont.ttf') format('truetype'),
url('/media/fonts/proximanova-bold-webfont.svg#wf') format('svg');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/media/fonts/proximanova-regular-webfont.eot');
src: url('/media/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/media/fonts/proximanova-regular-webfont.woff') format('woff'),
url('/media/fonts/proximanova-regular-webfont.ttf') format('truetype'),
url('/media/fonts/proximanova-regular-webfont.svg#wf') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/media/fonts/proximanova-extrabold-webfont.eot');
src: url('/media/fonts/proximanova-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('/media/fonts/proximanova-extrabold-webfont.woff') format('woff'),
url('/media/fonts/proximanova-extrabold-webfont.ttf') format('truetype'),
url('/media/fonts/proximanova-extrabold-webfont.svg#wf') format('svg');
font-weight: 800;
font-style: normal;
}
body, h1, h2, h3, button, input {
font-family: 'ProximaNova', tahoma, sans-serif;
}
While experimenting, we tried loading the custom fonts with JS after the page loaded - with the same effect. Is it a problem with the font file or is it related to Chrome's implementation of custom fonts?
This is most likely expected behavior at the moment. (See Chris Coyier's short explanation.)
Some browsers detect whether text should be displayed using a custom font, and they wait for that font to be loaded before displaying the text. This gives you a flash of invisible content (also known as FOIC). It avoids the layout shifting that can occur when text is displayed in one font and then updated to another (sometimes known as a flash of unstyled content, or FOUC). It looks like Chrome prefers the first method at the moment.
The Filament Group has published an article with workaround for this default behavior. I'm not sure how much their JS solution differs from what you tried. They're doing essentially the same thing—asynchronously loading the custom font declarations—but they also load the font directly in their async CSS file as a data URI. That may be what makes the difference.
Currently i'm working on my first project in hmtl and css w/ bootstrap.
Until now, things are going pretty well. But now I have a problem with adding a custom font to my webpage. I searched how to do this but #font-face doesn't really work. My teacher fixed it in class so it should be possible I only don't know how he perfectly did it and he didn't give the code. I did the next:
#font-face {
font-family: 'Impact Label';
src: url('ImpactLabel.eot');
src: url('ImpactLabel.eot?#iefix') format('embedded-opentype'),
url('ImpactLabel.ttf') format('truetype'),
url('ImpactLabel.woff') format('woff')
font-weight: normal;
font-style: normal;
}
I saw that chrome support woff so I don't get why it doesn't work on chrome, it does work on IE though. My h1 looks just like this:
h1
{
font-family: 'Impact Label';
}
Any help is welcome. Link to website is here
Your missing a semi-colon after the last src property. The code should read:
#font-face {
font-family: 'Impact Label';
src: url('ImpactLabel.eot');
src: url('ImpactLabel.eot?#iefix') format('embedded-opentype'),
url('ImpactLabel.ttf') format('truetype'),
url('ImpactLabel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
For a website I'm working on, the client wanted to use Roboto (by Google) as their main font. Several of the elements on the page use different styles of Roboto, such as Roboto Thin of Roboto Light. However, I have used the the #font-face selector to make the browser render the text in Roboto. My problem is that the design requires the use of different weights, not in the standard Roboto text. I'm not sure if I'm being clear enough. If you need clarification or a specific example, please ask.
PS: I found a similar thread about a similar problem, however, they use system fonts in conjuction with their #font-face. Using #fontface, how do I apply different styles to different font-families?
How do You Add Several font-faces to Separate Tags?
#font-face {
font-family: 'Crystal';
src: url('../fonts/crystalnormal.eot');
src: url('../fonts/crystalnormal.eot?#iefix') format('embedded-opentype'),
url('../fonts/crystalnormal.woff') format('woff'),
url('../fonts/crystalnormal.ttf') format('truetype'),
url('../fonts/crystalnormal.svg#crystalnormal') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FreestyleC';
src: url('../fonts/freestyle.eot');
src: url('../fonts/freestyle.eot?#iefix') format('embedded-opentype'),
url('../fonts/freestyle.woff') format('woff'),
url('../fonts/freestyle.ttf') format('truetype'),
url('../fonts/freestyle.svg#freestyle') format('svg');
font-weight: normal;
font-style: normal;
}
foo {
font-family:FreestyleC;
}
bar {
font-family:Crystal;
}
In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal. The issue is sporadic - it will render fine a few times, then I refresh and everything is in italics, then I refresh and it's back to normal.
I'm using this #font-face declaration:
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
Theres a comment on this article that indicates it could be about the order of the #font-face declarations: however the only thing that stopped the problem was removing the italic declarations altogether.
Another Stack Overflow answer suggests using the Font Squirrel #font-face generator; I'm not able to do this however as the web font files I'm using have DRM.
Is there a way to solve this without completely removing the italic declarations?
UPDATE: Upon further investigation, it seems this issue affects IE8 as well, not just in compatibility mode.
For each of your #font-face font-family names, create a custom name instead.
Example:
#font-face {
font-family: 'DINnormal';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DINbold';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DINitalic';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DINboldItalic';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
After those CSS rules are defined, then you can include specific CSS rule:
li {
font: 18px/27px 'DINnormal', Arial, sans-serif;
}
If, like me, you came across this question while experiencing a similar issue using TypeKit fonts, this entry from the TypeKit blog explains how you can force unique font-family names for each weight & style of a TypeKit font to address it.
I was having a similar issue, web font was showing in Italic when using IE8(Emulator), after digging and digging I came across a article that suggest emulator can sometimes be misleading especially when it comes to webFonts, and what it suggested was trying the site in the actual IE8, as I am using a windows 7 machine i wasn't able to download the real thing so I used this site called http://www.browserstack.com/ (No testers or fake browsers. Test in real browsers including Internet Explorer 6, 7, 8, 9, 10 and 11.)
and i noticed my font was not italic anymore :D
Here's the link to the article i read,
http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/
Hope this helps you guys, if i came across something like this when researching it really would have saved me a few hours
I've got two font files like: FONT-light and FONT-bold. Both come from #font-face kit so each version has like 5 font files included (OGV, TTF, WOFF, EOT).
To go from light version to bold version I have to use font-family: FONT-light; and then font-family: FONT-bold;. I want to use font-weight: light; and font-weight: bold; instead because I need it to CSS3 transitions. How do I achieve that?
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
To use the font-weight and the font-style properties on embedded fonts (#font-face) isn't so simple. There are a few items that you need to care about.
1 - #font-face Syntax:
The syntax is very important to use the font over all browsers. Paul Irish, with many resources, wrote the 'Bulletproof Syntax', as is shown above, which was improved several times:
#font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME.eot?') format('eot'), url('FONT-NAME.woff') format('woff'), url('FONT-NAME.ttf') format('truetype');
}
This version (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/, look for 'The Fontspring #font-face syntax'), is the most recent and works from IE6, on iOS, Android. It's important to take a look on the link to learn well why it should be written in that way.
2 - Font properties like font-weight and font-style
If you want, is possible to apply the font-weight and font-style on the #font-face declaration to use variations of the same font, but you need to be specific and precise about these characteristics. There are some ways to do it.
2.1 - Using one font-family to each variation
Using the 'Bulletproof Syntax', supposing that you want to load the 'Normal', 'Bold' and 'Italic' variations, we have:
#font-face {
font-family: 'FONT-NAME-normal';
src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FONT-NAME-bold';
src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FONT-NAME-italic';
src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
So, to use the variation that you want, you have to call the font-family that corresponds to it AND declare on the rule the font-weight: normal and font-style: normal. If you don't, the browser may apply the 'faux bold/italic' to the element that have this rules by default. The 'faux' styling works forcing the element to be shown with it, even if is already using an italic or bold font. The problem with is that the font always looks ugly because isn't the way that was made to look.
The same occurs when you define a 'Normal' font, for example, on a <p> element and, inside of it, you place a <strong> or <em>. The <strong> and <em> will force the bold/italic process over the font. To avoid that, you need to apply the correct font-family, destinated do the be bold/italic, to a rule for <strong> and <em>, with their respective properties (font-weight and font-style) set to normal:
strong {
font-family: 'FONT-NAME-bold';
font-weight: normal;
font-style: normal;
}
em {
font-family: 'FONT-NAME-italic';
font-weight: normal;
font-style: normal;
}
But there is a problem with it. If your fonts don't load the fallbacks choosen will lost their weights/styles. This leads us to the next way.
2.2 - Using the same font-family name, but different weights and styles
This way is more simple to handle through several weights and styles AND fallbacks correctly if your fonts don't load. Using the same example:
#font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
In this method, the weights and styles in the #font-face declarations act as “markers”. When a browser encounters those weights and styles elsewhere in the CSS, it knows which #font-face declaration to access and which variation of the font to use.
Make sure if your weights and styles match. If so, when you use a <strong> or <em> inside a parent which is using the #font-face that you created, it will load the right declaration.
In the source of these methods of stylization embedded (http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/), have another method that combines the two that I've mentioned (the 2.1 and 2.2). But it brings a lot of problems, including the 'faux bold/italic', forcing you to declare to the <strong> the right font-family and, for the <em>, classes that styles over the variations of the font that differs in weight. I guess the two that I've choosed are good enough to do the job.
Sources:
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/
Edit 1:
There's no need to use a lot of font extensions. The .woff type attends almost every browser, except for IE, if you need to give support for IE8 (which accepts only .eot format). (http://caniuse.com/#feat=fontface)
Other tip that maybe is useful is to embed the font on the CSS using base64 encoding. This will help avoiding a lot of requests, but you need to remember that it'll overwight the CSS file. This can be handled organizing the CSS content and the fonts to give the first CSS rules quickly in one small file, delivering the others on another CSS file, on the close of <body> tag.
you can add number to font-weight property, for example to the light version.
font-weight: normal; // light version as it is.
font-weight: 700; // makes light version bolder.