CSS fontface fallbackfont - css

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;

Related

I downloaded a webfont but it only works in brackets

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.

override default font using #font-face

We want to modify default font in HTML using #font-face
#font-face {
font-family: Times;
font-style: normal;
font-weight: 400;
src: local('serif');
}
in the above code we want to override Times font to serif, but above code is not working and Times font is getting used all the time instead of serif
Try this example, it works for me -- https://jsfiddle.net/gbk4rLw3/16/. However, it doesn't seem to work if you try to switch a font with a generic font type such as serif or sans-serif, but any other web-safe font seems to work.
Test code is here as well.
HTML
<div class="test">
TESTING
</div>
CSS
.test{
font-family: Times;
}
#font-face {
font-family: Times;
font-style: normal;
font-weight: 400;
src: local("Impact"); /* Try replacing with Arial, Comic Sans MS, etc....*/
} /*Doesn't seem to work with generic font types (serif, sans-serif)*/
If you want a serif font, try using "Courier New".

font-family not loading?

I have the following CSS declaration:
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
It isn't loading on the page. I'm having to add:
<style>
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;}
</style>
To the HTML to get it to work...This is true in chrome and safari...this one is weird, thoughts?
Note that all other CSS is working correctly...
So, !important worked, I'm not sure why. One note, I took out the extra families, it looks like this now:
body, body * {
font-family: Verdana, Tahoma, sans-serif !important;
}
But changing that had nothing to do with fixing it. The !important fixed it. Even though there isn't anything else changing the font-family at any other point in the CSS (refer to the working JS Fiddle). I attached a screenshot of the developer tools to show the inheritance.
have you tried to select following?
body, body * {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element in the body and the body itself */
/* OR just */
* {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element */
here is what you can do with CSS3:
http://www.css3.info/preview/web-fonts-with-font-face/
some font-families have to be enabled using `font-face, usually u do something like this
#font-face {
font-family: 'alex_brushregular';
src: url('alexbrush-regular-otf-webfont.eot');
src: url('alexbrush-regular-otf-webfont.eot?#iefix') format('embedded-opentype'),
url('alexbrush-regular-otf-webfont.woff') format('woff'),
url('alexbrush-regular-otf-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'alex_brushregular', Arial, "sans-serif";
}
This is an old post, but in case people have the same kind of problems and ended up here, I would suggest you make sure no errors in your css file (the easiest way to check is to comment out all settings except the font family or replace the css file with one that has just the font family setting). I just had the same problem and found the cause, after hours of frustration and no solutions from googling (that's why I came to this post; adding important! didn't work for me), was an error in my css file, so the browser skipped some settings including the font family. Although there're no errors in the css text shown in the original post, there might be one in the real css file.
Just try with the following example :
#font-face{font-family:'Arvo';src:url('fonts/Arvo-Regular.ttf')}
#font-face{font-family:'Erasmd';src:url('fonts/ERASMD.TTF')}
body { font-family: Arvo; }
(or)
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; }
I think this may help you to resolve your problem.
Something like this can also happen if your browser is using a cached version of your CSS file.
A "hard refresh" using CTRL+F5 might help in that case, as suggested e.g. here and here, and e.g. in the Firefox docs.
In my experience I had issues because there was only text within buttons on the page I was testing.
Setting the button font-family to inherit fixed the issue. I'm guessing this might extend to other elements also.
body {
font-family: <your family>;
}
button {
font-family:inherit;
}
It May be due the font you are using is not installed in your browser(even some 'websafe' fonts).Try using generic-font(like sans-serif,cursive,monospace) to see if the you style decalartion is working..

Bypassing #font-face declaration that overrides "helvetica" font family

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.

Not able to get font-face working

I'm trying to use #font-face, but I'm not being very successfull.
Up till now, I've been using Google fonts:
// HTML header
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
//CSS
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
Then I downloaded the fonts and tried using font-face:
This is my CSS:
#font-face {
font-family: 'Cuprum';
font-weight: normal;
font-style: normal;
font-size: 0.5em;
src: url('cuprum.eot?') format('eot'),
url('cuprum.woff') format('woff'),
url('cuprum.ttf') format('truetype'),
url('cuprum.svg#Cuprum') format('svg');
}
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
The fonts are located in the same folder as the CSS.
I've looked at, and tested oteher solutions, but I'm still not able to get it wokring.
I'm testing with the following browsers: FF7, IE8
Update
I've added font-size: 0.5em; This should at least change the font size. But that's not happening either. So I'm guessing the entire #font-face is ignored.
Did you try using the Font Squirrel generator? Just upload the font and it will do everything for you, it's real simple.
Here is the link:
http://www.fontsquirrel.com/fontface/generator
Hey Steven are you done with this?
Why dont you try this out.
insert this inside your css:
#font-face {
font-family: 'Cuprum';
font-style: normal;
font-weight: normal;
src: local('Cuprum'), url('http://themes.googleusercontent.com/static/fonts/cuprum/v1/sp1_LTSOMWWV0K5VTuZzvQ.woff') format('woff');
}
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
i hope it will work. :)
I think you could try it without the quotes around "Cuprum".
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
Also, there is sometime an issue if you/the user have that font installed locally.
To get around that, you can set a fake local reference.
See Paul Irish's Bulletproof #font-face syntax
EDIT
Two other things you might try:
change the font name to lowercase, cuprum.
Remove the following from the declaration:
font-weight: normal;
font-style: normal;
font-size: 0.5em;

Resources