We're changing a font on our site from FontA to FontB. Seems simple enough. The problem is is that FontA is hardcoded everywhere, and even in places that we can't easily access (content that we're pulling in from external databases has this font hardcoded, etc.). What I'd like to do is something like this:
#font-face {
font-family: 'FontB', 'FontA';
src: url('fontB.eot');
src: url('fontB.eot?#iefix') format('embedded-opentype'),
url('fontB.woff') format('woff'),
url('fontB.ttf') format('truetype'),
url('fontB.svg#fontB') format('svg');
font-weight: normal;
font-style: normal;
}
So both FontA and FontB use the same font. That way, all the legacy hardcoded content that uses FontA will start using FontB instead, and all future content will just use FontB. Is declaring multiple font-family legal and valid? Will it work cross-browser for browsers that use #font-face? If this won't work, I can just declare two #font-face, so it's not a huge deal. I'm just wondering if it's possible.
Unfortunately, you'll have to make do with two separate duplicate #font-face rules. The syntax for the font-family descriptor, unlike the font-family property, does not permit more than one family, so the syntax you have is invalid.
Attempting to specify it in two declarations just causes the latter to override the former like you would expect in a style rule, meaning the following:
#font-face {
font-family: 'FontA';
font-family: 'FontB';
...
Is equivalent to:
#font-face {
font-family: 'FontB';
...
Related
Is it possible to load an external font via inline CSS?
Note: I'm not talking about using an external CSS file with a #font-face definition, but rather something like the following:
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
Is it possible loading an external font with inline css? NOT with an external CSS file [....].
Yes, you can base64 encode a font or fonts as shown in this article from Stephen Scaff and drop them into a style block in your page to avoid the external request.
It may also be possible to use this technique in the way you describe if the browser you're using supports it.
<style>
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: normal;
src: local('PT Sans'), local('PTSans-Regular'),
url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
}
#font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: normal;
src: local('PT Serif'), local('PTSerif-Regular'),
url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
}
</style>
Every modern browser supports WOFF2, so you should probably use that and only that for the foreseeable future. Also, this technique will improve your page speed scores, but will degrade performance overall (even for first page loads), unless you're only base64-encoding critical page assets (e.g. glyphs of the font shown above the fold) and asynchronously load the rest.
Performance-wise your best bet right now is to use Brotli compression and pipe the webfont stylesheet down with HTTP/2 Server Push.
You cannot include a #font-face rule in a style attribute (which is “inline CSS” in the most narrow sense). By the HTML 4.01 specification, you cannot include such a rule inside the body element at all (“inline CSS” in a broader sense, which includes style elements). But in practice it is possible.
In practice, if you include a style element inside body, it will be processed by browsers just as if it were in the syntactically correct place, i.e. inside the head element. It even works “backwards”, effecting elements appearing before it.
You can even make this approach – which should be used only if you cannot change the head – formally correct as per HTML5 CR. It allows a style element at the start of any element with flow content as its content model. Current browsers ignore the scoped attribute.
Update: the following is not relevant any more, since the validator bug has been fixed.
However, there is a bug in the W3C Markup Validator and in validator.nu: they disallow style at the start of body. To overcome this bug, and to make your document validate in addition to being valid, you can use an extra div element:
<body>
<div>
<style>
/* your #font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
No, not that I know of. You will need to declare this kinds of things on a <style> block or an external CSS file.
Though if you want something like this, it's very probable you're doing it wrong.
If you use #font-face, you should be able to do something like this:
CSS
#font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/raleway_thin-webfont.woff') format('woff'),
url('fonts/raleway_thin-webfont.ttf') format('truetype'),
url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;
}
Make sure to include the fonts - the above example has placed all of the fonts in a relative-path directory to the css file.
HTML
<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">
You should be able to find free web-based #font-face fonts here.
This is what I have: http://agents.jeneth.com/versions/new/
The <div class="hr"></div> looks perfect in IE, but the decorative font for the 'e' in the center of the line doesn't look so decorative in any other browser. It's just an 'e'.
Here's a codepen with the code: http://codepen.io/carolemagouirk/pen/ElxnD
I was trying to find an easy way to make a nice horizontal rule without a bunch of code. I read that <hr> is treated wildly different by different browsers so, I decided to go with a div.
I hope I'm missing something obvious and easy to fix.
Have you defined something like this..
#font-face {
font-family: 'nymphetteregular';
src: url('Nymphette-webfont.eot');
src: url('Nymphette-webfont.eot?#iefix') format('embedded-opentype'),
url('Nymphette-webfont.woff') format('woff'),
url('Nymphette-webfont.ttf') format('truetype'),
url('Nymphette-webfont.svg#nymphetteregular') format('svg');
font-weight: normal;
font-style: normal;
}
Here, I have defined it as nymphetteregular after this declaration, then one can use this in css as a font..
make sure your website have source of the files .. if you don't have one.. you may find it here.
Note: I am not sure if its allowed to use commercially. Please verify if not using personally.
I am sure this will solve the problem.
declare your #font face rules first before you use them
I'm currently working on a little Project in which I'd like to use webfonts via #fontface.
I implemented the font's like this:
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
Now as you have probably experienced Chrome has problems displaying these fonts in a smooth way.
After some searching I found a solution which seem to work: You simply move this part of the css:
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
So you end up with this:
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
Now Chrome renders the Fonts in a smooth way, which is great.
BUT:
For some reason this SOMETIMES breaks the Layout. About each third time I load the page I'll get something like this:
Everything is moved to the left. Longer texts are breaking out of their containers. Looks really strange.
**Has anyone experienced this problem before?
I would be happy to get advice on this.**
Feel free to take a look for yourself:
View Fireflycovers.com online
Thanks a lot!
I have had this exact issue happen to a website of my own.
Instead of putting the svg at the top, keep the original formatting but add a media query as shown below. This will make chrome render the fonts perfectly and fixes the layout breaking.
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
}
}
I have seen the same issues (or worse) across a few sites. Most of the time the text is smashed together on top of itself.
My only solution at the point is to go back to the older font. You can also try to add the CSS rule: -webkit-font-smoothing: antialiased; for a small improvement.
The fix is in the duplication of the #font-face rule.
You don't necessarily need it in a media query in the Quka's answer, though that's a nice way to only target webkit browsers.
If you duplicate your #font-face declaration exactly as (svg first for better rendering), and paste it below the original, the funky layout/draw issues are gone.
Just calling out that the media query isn't important here—it's the duplicated rule. This is such a weird bug. So dumb.
Is this possible? Basically, I want to be able to set up a tag that says "within this tag, a-z go into italics, but nothing else does." Or similarly for a-z and A-Z.
CSS is meant to style the structure of the page not the content of the page directly.
This being said, there are a couple of ways around it (obviously):
Wrap the characters you want to italicize in <i>,<span>,<em>,<dfn>,<var>,<cite>
Use javascript to search through all of you text and wrap any of these elements around that text
use the server side code to split you text into an array and format the text with the tags on the server side so when the content makes it to the page it is already formatted.
There is no way to pick specific characters using CSS.
It’s possible only using a CSS3 feature with limited support (WebKit browsers), namely unicode-range restriction in #font-face, in a tricky way. The following works, in Chrome and Safari, on my computer, but most probably not on yours:
#font-face {
font-family: funny;
src: local("Times New Roman");
}
#font-face {
font-family: funny;
src: local("Times New Roman Kursivoitu");
unicode-range: U+61-7A;
}
p { font-family: funny; }
It might work on your computer too if you can find out the specific name of the specific italic font (typeface) in the font family being used. Perhaps substituting Italic for Kursivoitu might do this, but the point is that the specific names vary across systems, even if the font family name (like Times New Roman) is the same.
And this would be an ugly hack, since it would make the browser use an italic font even though font-style is the default (normal).
You could use this idea together with a downloadable font, since then you can control its name. I tested this with the Cardo font family from FontSquirrel, editing the delivered CSS just a bit:
#font-face {
font-family: 'Cardo';
src: url('Cardo104s-webfont.eot');
src: url('Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('Cardo104s-webfont.woff') format('woff'),
url('Cardo104s-webfont.ttf') format('truetype'),
url('Cardo104s-webfont.svg#CardoRegular') format('svg');
}
#font-face {
font-family: 'Cardo';
src: url('Cardoi99-webfont.eot');
src: url('Cardoi99-webfont.eot?#iefix') format('embedded-opentype'),
url('Cardoi99-webfont.woff') format('woff'),
url('Cardoi99-webfont.ttf') format('truetype'),
url('Cardoi99-webfont.svg#CardoItalic') format('svg');
unicode-range: U+61-7A;
}
p { font-family: Cardo; }
I just changed the specific font names CardoRegular and CardoItalic to the same name, here Cardo, and use that name for an element where letters a–z should appear in italic and other characters in regular Cardo.
To make letters a–z and A–Z italicized, you would edit the restriction to
unicode-range: U+41-5A, U+61-7A;
On browsers that support #font-face but not the unicode-range restriction, this trickery falls back to using regular Cardo in the element throughout.
Is it possible to load an external font via inline CSS?
Note: I'm not talking about using an external CSS file with a #font-face definition, but rather something like the following:
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
Is it possible loading an external font with inline css? NOT with an external CSS file [....].
Yes, you can base64 encode a font or fonts as shown in this article from Stephen Scaff and drop them into a style block in your page to avoid the external request.
It may also be possible to use this technique in the way you describe if the browser you're using supports it.
<style>
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: normal;
src: local('PT Sans'), local('PTSans-Regular'),
url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
}
#font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: normal;
src: local('PT Serif'), local('PTSerif-Regular'),
url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
}
</style>
Every modern browser supports WOFF2, so you should probably use that and only that for the foreseeable future. Also, this technique will improve your page speed scores, but will degrade performance overall (even for first page loads), unless you're only base64-encoding critical page assets (e.g. glyphs of the font shown above the fold) and asynchronously load the rest.
Performance-wise your best bet right now is to use Brotli compression and pipe the webfont stylesheet down with HTTP/2 Server Push.
You cannot include a #font-face rule in a style attribute (which is “inline CSS” in the most narrow sense). By the HTML 4.01 specification, you cannot include such a rule inside the body element at all (“inline CSS” in a broader sense, which includes style elements). But in practice it is possible.
In practice, if you include a style element inside body, it will be processed by browsers just as if it were in the syntactically correct place, i.e. inside the head element. It even works “backwards”, effecting elements appearing before it.
You can even make this approach – which should be used only if you cannot change the head – formally correct as per HTML5 CR. It allows a style element at the start of any element with flow content as its content model. Current browsers ignore the scoped attribute.
Update: the following is not relevant any more, since the validator bug has been fixed.
However, there is a bug in the W3C Markup Validator and in validator.nu: they disallow style at the start of body. To overcome this bug, and to make your document validate in addition to being valid, you can use an extra div element:
<body>
<div>
<style>
/* your #font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
No, not that I know of. You will need to declare this kinds of things on a <style> block or an external CSS file.
Though if you want something like this, it's very probable you're doing it wrong.
If you use #font-face, you should be able to do something like this:
CSS
#font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/raleway_thin-webfont.woff') format('woff'),
url('fonts/raleway_thin-webfont.ttf') format('truetype'),
url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;
}
Make sure to include the fonts - the above example has placed all of the fonts in a relative-path directory to the css file.
HTML
<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">
You should be able to find free web-based #font-face fonts here.