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".
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.
In our project we use Fira Sans Bold for thickening text segments. As a fallback we would like to use Lucida Sans Unicode with font-weight set to bold.
However, we run into a problem that we need to pre-set font-weight property for Lucida Sans Unicode.
What are possible ways to do this?
We tried #font-face.
#font-face {
font-family: 'Lucida Bold';
font-weight: bold;
src: local('Lucida Sans Unicode');
}
However, the problem is, while using Fira Sans Bold we rely only on the font-family and do not use any other other ways of thickening the font, such as font-weight:bold, strong, b, etc. This is insufficient for the #font-face (I raised the question over here: What can be the reason for #font-face failing to work?)
Would be grateful for any ideas.
I think a simple
.supposedly-bolded-text {
font-family: 'Fira Sans Bold', 'Lucida Bold';
font-weight: bold;
}
would do the trick for you.
Declaring font-weight/ font-style etc only affects which text 'matches' a #font-face rule.
As a font face is either bold or it isn't, declaring font-weight:bold won't force it to become bold. It'll just make it show up whenever your text is supposed to be bold.
Presumably the text that uses Fira Sans Bold is bold when font-weight of your text is normal. That means you'll want the bold face of Lucida to match whenever font-weight is normal, like this:
#font-face {
font-family: 'MyLucidaFont';
font-weight: normal;
src: local('Lucida Sans Unicode Bold');
}
"Whenever my text is font-weight:normal and uses font-family:"MyLucidaFont" then this font-face is applied"
Then:
font-family:"Fira Sans Bold","MyLucidaFont"
This is assuming that you can't change your Fira Sans Bold definition. If you can, then it'd be better to change that instead to make sure it applies whenever your texts text-weight is bold:
/* We don't need to declare Lucida at all if we change this one */
#font-face {
font-family: 'Fira Sans';
font-weight: bold; /* That's more like it! */
src: url('/FiraSansBold.woff');
}
Whenever your text has font-weight:bold and font-family:"Fira Sans","Lucida Sans Unicode" it'll be bolded with a fallback.
Keep in mind that "Lucida Sans Unicode" is a font family; a group of font faces.
I'm aware of browser differences here.
I'm aware of the "normal" font-weight attribute, even on bold fonts.
I'm aware there's different font generations around.
Regardless all this, each time we convert a bold font, it gets really thicker.
Has anyone experience this? What ways to you have to overcome this?
We normally end up relying on regular (pretending to be "bold") and light (if exists) to work as "regular", to "fix" the look and feel.
Note (update):
We are using fonts that do have a native bold. And that's the issue.
We are NOT adding any "extra bold".
It is called 'faux bold'. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves.
These computed shapes are ugly. With italic you get the slanted version of the roman type (while a true italic is a totally different shape concept) and the regular is 'upscaled' into bold. Almost if a border is applied. These computed shapes are a (type) designers nightmare.
More on faux bold: http://alistapart.com/article/say-no-to-faux-bold
You can avoid faux bold by supplying the appropriate fonts. Like this:
#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;
}
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
Read also the article (and how not to define style/weights):
http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
UPDATE:
You might also experience font-smoothing issues. Which can be fixed with some css:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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;