I'm working on a multi-language site and have used #font-face to display the Burmese Font. All looks good except letter-spacing. Thus i tried to insert letter-spacing inside #font-face. But it has no effect. Using letter-spacing inside body or html or container pushes the letter-spacing for other fonts as well and that's not what i'm looking for. I just want to increase the letter-spacing for this Zawgyi-One font as shown below.
#font-face {
font-family: 'Zawgyi-One';
src: url('/fonts/Zawgyi-One.eot');
src: url('/fonts/Zawgyi-One.eot?iefixa') format('eot'),
url('/fonts/Zawgyi-One.woff') format('woff'),
url('/fonts/Zawgyi-One.ttf') format('truetype'),
url('/fonts/Zawgyi-One.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
unicode-range: U+00-FF, U+980-9FF;
letter-spacing: 0.30em!important;
}
Looks from the Mozilla docs that letter-spacing is not supported as part of the font-face definition.
That said, I would define the font face, then define a class to apply to objects with that font family declaration.
For example,
.zawgi-one {
font-family: 'Zawgi-One';
letter-spacing: 0.30em !important;
}
Related
Using the Liberation font on a website works fine for standard text. However I also want to use that font as my text linked font but using the following code it does not call/use the font.
a:link {
color: #69f;
font-family: liberation_sansbold;
font-size: 18px;
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-transform: uppercase;
text-decoration: none
}
This is the embedded font on my website (and as I said it works fine for regualr (non-linked) text).
#font-face {
font-family: 'liberation_sansbold';
src: url('website.com/liberationsans-bold-webfont.eot');
src: url('website.com/liberationsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('website.com/liberationsans-bold-webfont.woff2') format('woff2'),
url('website.com/liberationsans-bold-webfont.woff') format('woff'),
url('website.com/liberationsans-bold-webfont.ttf') format('truetype'),
url('website.com/liberationsans-bold-webfont.svg#liberation_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
Any suggestions?
Have a look at this answer -- most browsers appear to limit what styles you can apply to some pseudo classes. The answer I linked to applies to :visited, but I wouldn't be surprised if similar limitations applied to :link. Try just styling a, not a:link -- I'm guessing you probably want your font to be used for all types of links anyway.
When using web fonts using #font-face I was wondering what's the recommend method on using fallback fonts?
Like, for example if I was using a web font that was bold, such as:
#font-face {
font-family: 'OpenSansBold';
src: url('../fonts/OpenSans-Bold-webfont.eot');
src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
Now when you call this you obviously just do this:
font-family: OpenSansBold;
However I was wondering about providing fallback fonts such as if the download of the font fails for whatever reason.
Obviously that's easy enough to do with a normal style font (non bold/non-italic) as below..
font-family: OpenSansRegular, Arial;
However, what I'm wondering is what about when the font is bold or italic.
Is it advised to something like this and it won't affect the web font?
font-family: OpenSansBold, Arial;
font-weight: bold;
Just wondering because if you didn't specify the bold then if the web font failed, they would get Arial, but it wouldn't be bold.
You are presumably using font files and a CSS file as generated by FontSquirrel. The problem with their approach is that each specific font (such as Open Sans Regular and Open Sans Bold) is represented as a separate font-family, with font weight set to normal. This means that instead of markup like <p>foo <strong>bar</strong> and simple CSS like p { font-family: Open Sans, Arial } (letting browsers default strong to bold font weight and select the suitable font from the Open Sans family), you will be forced to set fonts explicitly. This means setting both font family and font weight, implicitly with the font-family property value.
You would need to tune the CSS to get a better approach. You would use the same font family but different weights in the #font-family rule, and in the font-family rule, you would only set the family:
#font-face {
font-family: 'open_sans';
src: url('opensans-bold-webfont.eot');
src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-bold-webfont.woff') format('woff'),
url('opensans-bold-webfont.ttf') format('truetype'),
url('opensans-bold-webfont.svg#OpenSans') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'open_sans';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#OpenSans') format('svg');
font-weight: normal;
font-style: normal;
}
* { font-family: open_sans, Arial; }
And then you would just use font-weight: bold (or HTML markup that has such an effect by default, like strong, b, th, h1 through h6) for those elements that should appear in Open Sans Bold.
Doing it the way you describe appears to work on most browsers, too, but I wouldn’t count on it. Once you have declared a font as normal weight in your #font-face, setting font-weight: bold on text in that font could cause a) a failure, since a the weights don’t match or b) the font taken as a starting point for algorithmic bolding, resulting in double bolding. And if I’m not mistaken, b) is what happens on Safari (Win 7).
You've correctly highlighted an issue with the 'new age' of web fonts, this blog post discusses it and presents a workaround http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/
Relevant snippet
Problem number two is significantly bigger than the first. Consider FF Enzo, which doesn’t have a 400 (or even 500) weight. In some circumstances, its Light (300) weight might perhaps be a little too thin for small body type, so let’s use the 600 weight instead. Ah, that looks okay.
But it’s not okay! Because if that font can’t be displayed and we fallback to something else, that fallback font will render at its 600 weight; in other words: bold.
A workaround?
There’s a way around this and it’s the method FontsLive use in the CSS they generate for their users: you declare each weight individually rather than the entire family. Their code looks a bit like this:
CSS code:
{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; }
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; }
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; }
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; }
Update:
#font-face {
font-family: 'OpenSansBold';
src: url('../fonts/OpenSans-Bold-webfont.eot');
src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
And then something like (as you suggested):
{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }
While the accepted answer works, if you want to provide a really accurate fallback font you will want to define a separate line height and letter spacing for each fallback as well. The main reason to do this is that Google recently introduced a score on Cumulative Layout Shift (CLS), indicating how much the page jumps around upon loading.
You can achieve this by putting a CSS class on the body before the font loading, that gets removed if font loading completes successfully. I do that by including this near the top of the page:
<script>!function(d){if (d.fonts.ready){d.body.className="loading";d.fonts.ready.then(function(){d.body.className=""})}}(document)</script>
You CSS would then look something like this:
h1,p {font-family: Open Sans, Arial}
h1.loading {font-family: Arial;line-height:16px}
p.loading {font-family: Arial;line-height:12px}
By adding and removing the "loading" class in the inspector you can then play with the CSS to get it to stop jumping around. With this you can reliably get the CLS to zero to please the Google gods. The only alternative alternative I've found is using a font loader library which will give a penalty on loading time.
I've got two font files like: FONT-light and FONT-bold. Both come from #font-face kit so each version has like 5 font files included (OGV, TTF, WOFF, EOT).
To go from light version to bold version I have to use font-family: FONT-light; and then font-family: FONT-bold;. I want to use font-weight: light; and font-weight: bold; instead because I need it to CSS3 transitions. How do I achieve that?
#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;
}
From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
To use the font-weight and the font-style properties on embedded fonts (#font-face) isn't so simple. There are a few items that you need to care about.
1 - #font-face Syntax:
The syntax is very important to use the font over all browsers. Paul Irish, with many resources, wrote the 'Bulletproof Syntax', as is shown above, which was improved several times:
#font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME.eot?') format('eot'), url('FONT-NAME.woff') format('woff'), url('FONT-NAME.ttf') format('truetype');
}
This version (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/, look for 'The Fontspring #font-face syntax'), is the most recent and works from IE6, on iOS, Android. It's important to take a look on the link to learn well why it should be written in that way.
2 - Font properties like font-weight and font-style
If you want, is possible to apply the font-weight and font-style on the #font-face declaration to use variations of the same font, but you need to be specific and precise about these characteristics. There are some ways to do it.
2.1 - Using one font-family to each variation
Using the 'Bulletproof Syntax', supposing that you want to load the 'Normal', 'Bold' and 'Italic' variations, we have:
#font-face {
font-family: 'FONT-NAME-normal';
src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FONT-NAME-bold';
src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FONT-NAME-italic';
src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
So, to use the variation that you want, you have to call the font-family that corresponds to it AND declare on the rule the font-weight: normal and font-style: normal. If you don't, the browser may apply the 'faux bold/italic' to the element that have this rules by default. The 'faux' styling works forcing the element to be shown with it, even if is already using an italic or bold font. The problem with is that the font always looks ugly because isn't the way that was made to look.
The same occurs when you define a 'Normal' font, for example, on a <p> element and, inside of it, you place a <strong> or <em>. The <strong> and <em> will force the bold/italic process over the font. To avoid that, you need to apply the correct font-family, destinated do the be bold/italic, to a rule for <strong> and <em>, with their respective properties (font-weight and font-style) set to normal:
strong {
font-family: 'FONT-NAME-bold';
font-weight: normal;
font-style: normal;
}
em {
font-family: 'FONT-NAME-italic';
font-weight: normal;
font-style: normal;
}
But there is a problem with it. If your fonts don't load the fallbacks choosen will lost their weights/styles. This leads us to the next way.
2.2 - Using the same font-family name, but different weights and styles
This way is more simple to handle through several weights and styles AND fallbacks correctly if your fonts don't load. Using the same example:
#font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
In this method, the weights and styles in the #font-face declarations act as “markers”. When a browser encounters those weights and styles elsewhere in the CSS, it knows which #font-face declaration to access and which variation of the font to use.
Make sure if your weights and styles match. If so, when you use a <strong> or <em> inside a parent which is using the #font-face that you created, it will load the right declaration.
In the source of these methods of stylization embedded (http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/), have another method that combines the two that I've mentioned (the 2.1 and 2.2). But it brings a lot of problems, including the 'faux bold/italic', forcing you to declare to the <strong> the right font-family and, for the <em>, classes that styles over the variations of the font that differs in weight. I guess the two that I've choosed are good enough to do the job.
Sources:
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/
Edit 1:
There's no need to use a lot of font extensions. The .woff type attends almost every browser, except for IE, if you need to give support for IE8 (which accepts only .eot format). (http://caniuse.com/#feat=fontface)
Other tip that maybe is useful is to embed the font on the CSS using base64 encoding. This will help avoiding a lot of requests, but you need to remember that it'll overwight the CSS file. This can be handled organizing the CSS content and the fonts to give the first CSS rules quickly in one small file, delivering the others on another CSS file, on the close of <body> tag.
you can add number to font-weight property, for example to the light version.
font-weight: normal; // light version as it is.
font-weight: 700; // makes light version bolder.
I'm trying to use the Ubuntu font on a website. I am using the FontSquirrel #font-face generator. On computers where the Ubuntu font is installed everything works fine when I simply have css like font-family: Ubuntu. But on other computers it won't work unless I explicitly state which particular variety I want like font-family: UbuntuRegular or font-family: UbuntuBoldItalic. It is the same situation across all browsers.
It is silly to have to declare weight and style every time. Isn't there some way to just declare the general font family and have the bold and italic faces used automatically when needed?
Most #font-face generators set font-weight and font-style to normal and use separate declarations for each weight/style for backward compatibility. But you can rewrite the declarations to use the same family name for each variation, changing only font-weight and font-style within each where appropriate, e.g.:
#font-face { /* Regular */
font-family: 'Klavika';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('klavika-regular-webfont.woff') format('woff'),
url('klavika-regular-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
#font-face { /* Bold */
font-family: 'Klavika';
src: url('klavika-bold-webfont.eot');
src: url('klavika-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('klavika-bold-webfont.woff') format('woff'),
url('klavika-bold-webfont.ttf') format('truetype'),
font-weight: bold;
font-style: normal;
}
So that H1 should inherit the bold weight without the need to specify the weight:
h1{ font-family: 'Klavika';}
456 Berea St has a good post detailing the implementation (and compatibility): http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
I’m currently trying to implement webfonts on the site I build, I want to use it as a fallback within the font-family attribute, i.e. If the character is not represented in Arial / Helvetica then it should be within the webfont used.
I realise this will not work in IE6 and 7 but expected it to work in IE8 which it doesn’t seem too.
I was just wondering if anyone had ever had any experience of this problem and if using a webfont as a fallback font was possible in IE8 or if anyone can just see that I'm just doing something wrong within the code.
Thanks in advance, for any help
Here is my css code:
#font-face {
font-family: 'stix';
src: url('/webfonts/webfont.eot');
src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/bold-webfont.eot');
src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/talic-webfont.eot');
src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/bold_italic-webfont.eot');
src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
font-weight: bold;
font-style: italic;
}
body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }
Try to use converter on fontsquirrel.com
What's the benefit of using STIX as a fallback?
If it's to prevent the UA downloading the font unless it's needed, you're out of luck, only webkit has that behaviour currently https://gist.github.com/478344 Worse still, IE will download all the fonts defined in #font-face even if they're not referenced anywhere else in the CSS.
If it's because STIX doesn't have regular chars, yeah, IE's going to screw you over here. I'd recommend merging STIX with a free typeface to create one deliverable that has all the chars you need.
I'm using a stripped down version of your code (for the sake of clarity alone - there's nothing wrong with it) and testing in lots of browsers (with the webfont being STIX, like you, not that I'm aware if this plays a role), and I'm seeing some odd behaviour: font fallback in most browsers does work, but only when excluding all italic variants of fonts (be they italic or bolditalic).
I.e. this works (100% of the time), with browsers falling back to STIX for those chars not in arial:
#font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('stixgeneralbol-webfont.eot');
font-weight: bold;
font-style: normal;
}
body {font-family: arial, stix, sans-serif;}
… but this does not work 100% of the time (although sometimes it does display the chars!):
#font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
font-weight: normal;
font-style: italic;
}
body {font-family: arial, stix, sans-serif;}
The reason for this appears to be that the STIX fonts package has errors.
In order to get around this, open your STIX fonts package in FontForge and save - FontForge will inform you of errors. Fix these, and only then import into FontSquirrel. Font fallback should now work correctly.
The problem might be that "in Internet Explorer 8 and earlier versions, only one URL value is supported".
Also, rather than using #font-face for a fall-back font, choose one you'd prefer and don't declare "arial, helvetica" in which ever order, instead falling straight back on sans-serif. This way, the most suitable sans-serif is used on each platform, such as Arial for Windows and Helvetica for OS X, etc.
Btw... IE will try to load SVG format so you should define EOT src after svg! (IE bug).