I have a font namely SourceSansPro, and I include it in my css as follows:
#font-face {
font-family: "SourceSansPro";
src: url("../font/SourceSansPro-Bold.otf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "SourceSansPro";
src: url("../font/SourceSansPro-Regular.otf");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "SourceSansPro";
src: url("../font/SourceSansPro-Light.otf.otf");
font-weight: lighter;
font-style: normal;
}
It's rather redundant. Isn't there a neater way to do this?
Unfortunately the #font-face syntax is not very flexible. You're at the mercy of the browser developers in this case. You can, however, segment your fonts into a fonts.css file and just do an import:
#import url('css/fonts.css');
Another possible solution would be to add the font via Google's Font API. That way, you don't have to worry about the CSS in the first place. You just add
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
to your stylesheet. Or you can add
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
to the <head> of your document.
It is not essentially redundant, since you are using three typefaces and they need to be declared separately. You can, however, omit the declarations font-style: normal and font-weight: normal, since they correspond to defaults.
On the other hand, the code works only on browsers that support OTF as the format of downloadable fonts. Use e.g. http://www.fontsquirrel.com/tools/webfont-generator to generate other formats and code for taking them into use.
The font-weight: lighter probably works in most situations, but it is illogical (using relative keyword when you should specify the actual weight) and should be replaced by font-weight: 200, which corresponds to the actual weight of the typeface
Well, you're obviously going to need to change the font-family name for each one or I would think that having them all the same would make them clash. At least I would think that. I have never had it happen to me, but if it's not working, then do that. But if not, ignore this.
As for the #font-face simplicity, the only real specifications you need for the #font-face is the font-family and the src. That calls the font style, obviously. So any other web styling you can leave to either the html style or css.
#font-face {
font-family: "SourceSansPro";
src: url("../font/SourceSansPro-Light.otf.otf");
}
You can then style your font in either a span or css class.
<span style="font-family: SourceSansPro; font-weight: bold; font-style: italic;">Styled Font</span>
<div style="font-family: SourceSansPro; font-weight: bold; font-style: italic;">Styled Font</div>
<div class="myspecificstyle">Styled Font</div>
If you have a lot of fonts, I would just put them all in one css file and then link it to the page you're using them on.
<link rel="stylesheet" type="text/css" href="myfonts.css">
Related
I'm hosting my own fonts, but I've also created a fiddle linking to Google fonts and the problem remains.
All browsers change the weight of the font in the H tags.
I find this a bit disconcerting particularly when in my case I'm specifying the font file that should be used.
If for example I set, both <h3> and <p>, with font-family: 'robotoregular'; and use the same exact font-size in both cases, I would expect the same exact result in both of them. Instead, what the browsers produce is a bold version of the font in the <h3>, and the only way to set it right is to specify the font-weight, which shouldn't be necessary if I'm already indicating a specific font file.
Is this behavior to be expected, and why does this happen?
Here's a Fiddle
#font-face {
font-family: 'robotoregular';
src: local('robotoregular'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
local('robotoregular'), url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'robotoregular';
font-size: 27px;
}
h3 {
font-family: 'robotoregular';
font-size: 27px;
font-weight: normal; /*IF NOT INCLUDED, THE BROWSER WILL MAKE IT BOLD*/
}
Browsers apply a wide variety of defaults. Headers get font-weight: bold, among other things (like margins).
If you want complete, total control, consider a reset stylesheet.
This is my first time using font-face, and it's really hard for me to actually render the exact font, especially when it comes to *.ttc files.
Here is what I've done so far:
#font-face {
font-family: 'FontName';
src: url('../fonts/font.ttc') format('truetype');
font-weight: normal;
}
.header {
font-family: 'FontName;
}
When I check the network tab in Chrome's inpector, I can see that the font is loaded successfully, but the result text still uses another font.
What did I do wrong? Please help me to fix this problem. Thanks a lot in advance.
Update
One more thing that I figured out. When I style inline, the font is rendered correctly.
<p style="font-family:'FontName'">test 2</p>
Is there any delay in loading or something like that?
You can't use font collections for CSS #font-face declarations as the purpose of this syntax is to, unambiguously, specify which single font resource must be used by the browser when you specify some specific combination of font-{family, weight, style, etc} in your actual page CSS.
Specifying a font collection makes this impossible: there is no syntax to specify which font inside that collection you would need, so ttc are not supported by design. Extract the individual font assets you need (if legally allowed!) and then be explicit about which single font you need for which single #font-face declaration.
And remember that this is possible:
#font-face {
font-family: myfont;
font-weight: normal;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
#font-face {
font-family: myfont;
font-weight: bold;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
...
:root {
font-family: myfont;
}
h1 {
font-weight: normal; /* will use that-font-I-like-Regular.woff */
...
}
p {
font-weight: bold; /* will _also_ use that-font-I-like-Regular.woff */
...
}
I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.
In my XHTML i mentioned the CSS Path,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
AND my CSS file have styles like,
#font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') #ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
also mentioned XHTML in OutputText as styleClass="UX_FontClass "
Even though font is not working in any browser. What i did wrong with my code? OR Anything i missed out?
You should use google fonts, its really easy to use.
https://www.google.com/fonts#UsePlace:use/Collection:Robot
example
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
You are using custom font so you need to add a few font type format as well; like ttf, eot and svg for iphone, ipad devices.
Note: Some browsers supports different font type that's why you need
ttf,svg or eot.
#font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
Remember after that you need to add this code in class UX_FontClass
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
The error is in defining a font named roboto-bold in the #font-face clause, but trying to use a font named roboto-bolditalic later on. That is not the same family!
Solution: make sure the names match.
You probably meant
font-family:'roboto-bold'; font-style:italic;
or, since you're defining the size too, you could use the font shorthand
font:italic 25px 'roboto-bold';
And there's no need for the !important.
Why not use Google fonts?
Place in the header of your html:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
Use in your css:
font-family: 'Roboto', sans-serif;
its really easy to use in css.
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
I have problem with CSS content value. It’s not displayed at all, just codes, like in the picture. Can anyone explain what causes it? I’ll try to fix it, without posting code here.
HTML:
<i class="icon-map-marker"></i> Atlanta
CSS:
.icon-map-marker:before{
content: "\f041"
}
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot') format('embedded-opentype'),
url('fontawesome-webfont.woff?') format('woff'),
url('fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal
}
[class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
margin-top: 0
}
This is caused by the character not being defined in the font used to display it. A placeholder is displayed instead. In Font Awesome, the fa-map-marker character is on that position.
Clearly font-family: FontAwesome is not used for the :before pseudo-element. Either it is not set, the font is not available, or a browser bug is triggered. I assume that no other CSS rules are used (otherwise overriding somewhere in the cascade could take place).
font-family: FontAwesome not set?
:before is child of the element it is “before”, so it inherits font-family correctly. The parent has font-family: FontAwesome unless the rule is invalid, which is not the case. Therefore the problem is not here and it must be in the unavailability of the font.
To be absolutely sure, try changing your rule for :before to
.icon-map-marker:before {
content: "\f041";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
}
and see if now the character displays OK.
FontAwesome font family not available?
Either the font cannot be downloaded, is broken, or the #font-face at-rule is invalid.
The at-rule seems perfectly valid to me. I’m just wondering, why the question mark after the WOFF path? I think this is a left-over after old IE (< 9) hack, but it should do no harm.
Checking the ability to download correct font file is up to you. You can verify that the font is loaded by sniffing the network traffic, e.g. using Firebug or LiveHTTPHeaders (but be sure to use your font and reload skipping cache via Ctrl + F5).
I think your problem is a browser bug. You did not specify what browser in which version you use, so I cannot say anything more specific.
To be always sure, you can use CSS from the CDN. Or follow the instructions on the same site to get Font Awesome working. You can also read more on bulletproof #font-face yourself, but then you need to keep up with the current implementation status of #font-face in browsers you want to support.
Quick test of fa-map-marker in :before using CSS from CDN
Insert this into your location bar:
javascript:'<title>Font Awesome test</title><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/><style>body:before {font-family: FontAwesome; content: "\\f041";}</style>Atlanta'
The \\ is needed instead of \ inside JavaScript string. The string is a valid HTML5 document.
Side notes
U+F041 is a character from range reserved for private use. Consequentially different fonts may have different characters for this code point.
Maybe it would be better to use more classes instead of the two-in-one. Using icon and map-marker could both simplify your selectors and tell you that your classes could be more semantic. Using a CSS preprocessor could let you compose the more semantic class city of lower, purely presentational units.
Your HTML markup is terrible. It is awfully bent to serve your presentational requirements, but HTML should mark up the structure that is presentation-agnostic. Why don’t you use Atlanta?
may be its a cache issue on your browser, try adding version numbers next to file name.
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v1');
src: url('fontawesome-webfont.eot?v1') format('embedded-opentype'),
url('fontawesome-webfont.woff?v1') format('woff'),
url('fontawesome-webfont.ttf?v1') format('truetype');
font-weight: normal;
font-style: normal
}
http://www.i3physics.com/blog/2010/07/dsfsdf/
Here is an example.
The part where it said "PHP" (the right top corner) remained as slim as it was.
here is part of the css code
.wp_syntax_lang {
background-color:#3c3c3c;
position:absolute;
right:0;
padding:1px 10px 3px;
color:#ddd; font-size:9px; font-weight:800;
text-transform:uppercase;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
border-radius-bottomleft:5px;
}
I tried bold, bolder, 700, 800, 900 and is not working under FF.
font-weight can fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.
For example, if I embed the following font...
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
Then I will not be able to use anything other than a weight of 400. All other weights will revert to 400.
If you want additional weights, you need to specify them in separate #font-face declarations with those additional weights, like this.
#font-face {
font-family: "Nexa";
src: url("Nexa-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
Usually each weight will have a separate font file the browser will need to download, unless you're using variable width fonts.
Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.
Most browsers don't fully support the numerical values for font-weight. Here's a good article about the problem, and even tough it's a little old, it does seem to be correct.
If you need something bolder then you might want to try using a different font that's bolder than your existing one. Naturally, you could probably adjust the font size for a similar effect.
If you're importing a Google font, you need to ensure you've specified all the weights that you would like to use.
In my case, I was using Google's Roboto font. I had to import it with several different weights, like this:
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel="stylesheet" />
Remember that each additional weight increases the amount of data each visitor needs to download, and can slow down the loading of your page, so only use what's necessary.
i was also facing the same issue, I resolved it by after selecting the Google's font that i was using, then I clicked on (Family-Selected) minimized tab and then clicked on "CUSTOMIZE" button.
Then I selected the font weights that I want and then embedded the updated link in my html..
For me the bold work when I change the font style from font-family: 'Open Sans', sans-serif; to Arial
I removed the text-transform: uppercase; and then set it to bold/bolder, and this seemed to work.