I have a bookmarklet that inserts a widget into any site's pages. The styling of the widget is being broken by a certain site that has the following CSS #font-face declaration:
#font-face {
font-family: "helvetica";
src: url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.eot?iefix") format("eot"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.woff") format("woff"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.ttf") format("truetype"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.svg#svgFontName") format("svg");
}
The widget that my bookmarklet inserts uses helvetica everywhere and on this one site it looks horrible because the browser is mapping helvetica to the #font-face declaration of that name rather than the standard helvetica system font.
The question: is there any way to override/bypass this #font-face declaration or create another #font-face declaration that maps to the system helvetica font?
Unless the stylesheet overrides it by referencing the stylesheet with !important after your widget's stylesheet, this could work:
#font-face {
font-family: 'ProperHelvetica'; /* Make a name for the "proper" Helvetica */
src: local('helvetica'); /* Assign it to the Helvetica font on the user's system */
}
.your-widget {
font-family: 'ProperHelvetica', helvetica, sans-serif !important; /* Make everything
in your widget use the "proper" Helvetica and if the user doesn't have it,
use the site's helvetica. */
}
You can add the following css to create a custom font name that maps to a local installed font:
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica");
}
For the styling of the widget you should use this:
font-family: mycustomuniquefontname, Helvetica, sans-serif;
If you are using more font styles such as bold and italic, you have to define all of them:
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica");
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Bold");
font-weight: bold;
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Italic");
font-style: italic;
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Bold Italic");
font-weight: bold;
font-style: italic;
}
As soon as I submitted this question I got some inspiration. What I found works is the following...
Create a the following css rule:
#font-face {
font-family: 'RealHelvetica';
src: local('helvetica');
}
In the elements that require the real helvetica system font specify the font-family as 'RealHelvetica' instead of just helvetica:
.widget {
font-family: 'RealHelvetica',helvetica,sans-serif !important;
}
Wrap your widget in an iframe. Don't know if it the best solution, but it is a solution.
http://jsfiddle.net/bwcNX/
var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').append( $frame );
setTimeout( function() {
var $doc = $($frame[0].contentWindow.document.documentElement);
$doc.html("<head><title>abc</title></head><body><div>def.</div></body></html>");
$doc.find('div').append('<div>ghi.</div>');
}, 1 );
Bonus: Should future proof your widget against most other CSS or font related problems.
Related
So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.
I want to change the default font used in my application. I have installed #font-face but not all of the elements were changed. Is it possible to use element 'body' and put font-family I want there? It'd be like :
body {
font-family: 'champagne'; }
I've put this :
#font-face {
font-family: Champagne;
src: url(css/font/Champagne_Limousines.TTF); }
If you are already using font-family on body like this
body {
font-family: 'Font Name';
}
It should apply to all elements if its not applying means font-family properties already defined for other elements as well. for example
p{
font-family: Arial;
}
for that you can use * selector like this
*{
font-family: 'Font Name' !important;
}
which will override all other elements, also you have to use web fonts for it and all other formats as well to support all browsers
EOT,WOFF,SVG & TTF
your Font face should look like this
#font-face
{
font-family: 'FontName';
src: url('FontName.eot');
src: url('FontName.eot?#iefix') format('embedded-opentype'),
url('FontName.woff') format('woff'),
url('FontName.ttf') format('truetype'),
url('FontName.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Hi I have a quick question on use CSS #font-face to create a font family.
Traditionally, I used to setup my CSS fonts like this:
#font-face {
font-family: 'My Font Regular';
src: url('fonts/myfont.ttf');
}
#font-face {
font-family: 'My Font Bold';
src: url('fonts/myfont-bold.ttf');
}
p { font-family: "My Font Regular";}
strong {font-family: "My Font Bold";}
However I've recently discovered that you can do it like this:
#font-face {
font-family: 'My Font';
src: url('fonts/myfont.ttf');
font-style:normal;
font-weight:normal;
}
#font-face {
font-family: 'My Font';
src: url('fonts/myfont-bold.ttf');
font-style:normal;
font-weight:bold;
}
p {
font-family: "My Font" ;
font-style:normal;
font-weight:normal;
}
strong {
font-family: "My Font" ;
font-style:normal;
font-weight:bold;
}
My question is, if I use the second technique in bold for example, will the text still render using the custom .eot or will the browser try to emulate it without the using the actual bold font file?
Thanks
If your font file is a bolded font, it would be redundant to set font-weight: bold and there's no need to declare font-weight: normal since that is the default value. You should also use more than .eot files so you have a fallback for other browsers like the others suggested.
Here is an example of what I use:
#font-face {
font-family: 'Franklin Demi';
src: url('FranklinDemi.eot'),
url('FranklinDemi.ttf') format('truetype'),
url('FranklinDemi.svg#font') format('svg');
}
#font-face {
font-family: 'Franklin Heavy';
src: url('FranklinHeavy.eot'),
url('FranklinHeavy.ttf') format('truetype'),
url('FranklinHeavy.svg#font') format('svg');
}
.sidansTitel{
font-family: 'Franklin Demi';
font-size: 22pt;
color: #8b9ba7;
text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}
.sidansTitel b{
font-family: 'Franklin Heavy';
font-weight: normal;
font-style: normal;
}
Setting both font-weight: normal; and font-style: normal; makes the font render well in ie/ff/chrome, without it it looked like crap in Chrome. I believe that it looked like crap in Chrome because it tried to render the bold font in bold, which should be fixed by this.
EDIT: spelling
Web fonts tend to come split up into separate files for bold, italic, etc. I'm using a #font-face declarations like this (trimmed down to WOFF only for this example):
#font-face {
font-family: 'OpenSans';
src: url("fonts/OpenSans-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSansItalic';
src: url("fonts/OpenSans-Italic.woff") format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSansBold';
src: url("fonts/OpenSans-Bold.woff") format("woff");
font-weight: normal;
font-style: normal;
}
And then I implement the various styles:
body {
font-family: "OpenSans", Helvetica, sans-serif;
}
strong {
font-family: "OpenSansBold", Helvetica, sans-serif;
font-weight: normal; /* Web font is already bold */
}
em {
font-family: "OpenSansItalic", Helvetica, sans-serif;
font-style: normal; /* Web font is already italic */
}
I have to override the UA's bold/italic styling (the commented lines above). Otherwise, it will add a faux-bold/italic look to the text which is very ugly.
If I were to leave it like that, and one of the web font files failed to load, then the fallback font would not have the proper style. For example, this:
<strong>This text is bold</strong>
would display as Helvetica regular if OpenSans-Bold.woff failed to load, but I want it to be Helvetica bold.
How do you make sure that your fallback fonts get the correct bold/italic/regular styling?
you want to combine your #font-face rules.....only declare one font-family name, and declare the weights as your variables, like bold, italic, etc. the example below shows how to use Open Sans Regular with Open Sans Bold:
#font-face{font-family:"open_sansregular";
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot");
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg");
font-weight:normal; font-style:normal}
#font-face{font-family:"open_sansregular";
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot");
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg");
font-weight:bold; font-style:normal}
if you are familiar wtih #font-face rule, its so easy...the only differences in the two rules above is the url(s) and the font-weight. so for italic, change the url to point to the italic font, and then change the style to font-style:italic.
there's a bunch of benefits you get from this, including less rewrites because you're not going to have to redeclare each font...you only declare it once.
but that essentially reduces your css to this:
body{font-family:"OpenSans", Helvetica, sans-serif}
strong{font-weight:700}
em{font-style:italic}
then simply build a better font stack that provides the amount/level of coverage that you desire.
When i use fontface, the browser needs some time before the font is downloaded and rendered, until then the browser default font is shown. I have tried to give Arial as fallbackfont and as general HTML/BODY font, but this does not change the problem.
is there a way to avoid this?
#font-face {
font-family: 'StrukturProBold';
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot');
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot?iefix') format('eot'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.woff') format('woff'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.ttf') format('truetype'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}
body, html {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
h1 {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
This is called a "Flash Of Un-styled Text" (or FOUT). You wont see it in Webkit browsers, because they hide the text until the font has been loaded. If you want to be more agressive with forcing other browsers to hide the FOUT, you can do it with some pre-written JavaScript.
Paul Irish explains it all here:
http://paulirish.com/2009/fighting-the-font-face-fout/
Here's the code you need:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['yourfont'],
urls : ['http://example.com/yourfontdeclaration.css']
}
});
</script>
and some CSS:
h2 {
font-family: 'yourfont', helvetica, sans-serif;
}
.wf-loading h2 {
visibility: hidden;
}
Unless the visitor has the specialty font installed on their system, the browser has to download it just like it would an image file, or a linked stylesheet or .js file.
From reading the comments above, you're probably already doing the best that you can.
StrukturProBold is just a simple sans-serif font.
You can expand your list of secondary font choices though, maybe Arial and Helvetica aren't as good of a choice as say Verdana, or Trebuchet
font-family: "StrukturProBold", Trebuchet, Verdana, Helvetica, Arial, sans-serif;