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.
Related
I am using three fonts that I load via #font-face and they all look like they are supposed to on Chrome, but on Firefox and IE they look different. Like with extra bold added to them and they are more blocky.
#font-face {
font-family: 'OpenSans-Regular';
src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Montserrat-Regular';
src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
url('../fonts/montserrat-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Regular';
src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
How I apply these fonts to elements:
...
font-family: "OpenSans-Regular", sans-serif;
...
If I edit the element in Firefox with dev tools and set font-family: Open Sans then it works like it should.
This problem is giving me a headache as I don't understand why this is happening.
All applications are developed with specific blocks of code. This is like "Default Font" on HTML and CSS. It happens with all web pages that are opened on different browsers. Try this thing with
Facebook
and you will see the difference between fonts on Chrome and Firefox. If font looked bolder than you wanted it, just play with "font-weight" on CSS StyleSheet. e.g.:
body.font-weight: xx px;
late reply but here goes; Firefox renders headers and some other elements as "double bold" in your case so you would have to remove the font weight from the element in order to normalize this if you don't want to load more font files[1].
To improve the rendering, try loading the fonts as follows[2][3]:
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
url('../fonts/roboto-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-italic-webfont.woff2') format('woff2'),
url('../fonts/roboto-italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
[1] It is better to have fewer fonts but include the correct ones
[2] just the Roboto as an example but the same would apply for the rest as well
[3] consider defining the values in absolute numbers rather than relative values as these can be interpreted differently by the different browsers
Answer to my question was having different font weights, e.g. if you have google fonts then make sure you have light(300), regular (400), medium (500), bold (700) versions imported.
The dev company I hired to develop a mobile website failed to include selection.json file into the folder, and never even thought to keep it locally for themselves for future reference during the support period... Basically, all they did include were the font files: TTF, EOT, SVG, and WOFF.
Here's what Icomoon says about adding more glyphs to an existing font: Each font pack you download from the IcoMoon app comes with a selection.json file which you can import back to the app in order to modify or update your font, along with the class names associated with its glyphs.
Now I need to add more glyphs to the font. It looks like the simplest approach would be to generate another font, and add it to the style.css. Could you please advise how to do that? the original lines are:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon/icomoon.eot?t9csor');
src: url('../fonts/icomoon/icomoon.eot?#iefixt9csor') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?t9csor') format('woff'), url('../fonts/icomoon/icomoon.ttf?t9csor') format('truetype'), url('../fonts/icomoon/icomoon.svg?t9csor#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
speak: none;
line-height: 1;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-family: 'icomoon';}
/* Better Font Rendering =========== */
Or, perhaps, there's another way to add icons to this font, without breaking its structure and having to revise entire CSS changing the class names throughout the website?
Thank you!
One option would be to find all of the icons in your current icon font and create a new font using both the current icons as well as whatever new icons you want to include. You'll then replace the current font with the new one.
Another option is to create a new font that only includes your new icons, then include that in your website along with the existing icon font. Using the icomoon app, you can customize the font name and class prefix by clicking on "Preferences". I would recommend doing this in order to avoid conflicting with the current "icomoon" font included in your website.
If you want to include both your old font and the new font, you'll then include some CSS similar to this (generated by icomoon):
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon/icomoon.eot?t9csor');
src: url('../fonts/icomoon/icomoon.eot?#iefixt9csor') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?t9csor') format('woff'), url('../fonts/icomoon/icomoon.ttf?t9csor') format('truetype'), url('../fonts/icomoon/icomoon.svg?t9csor#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ourotherfontname';
src: url('../fonts/icomoon/ourotherfontname.eot?t9csor');
src: url('../fonts/icomoon/ourotherfontname.eot?#iefixt9csor') format('embedded-opentype'), url('../fonts/icomoon/ourotherfontname.woff?t9csor') format('woff'), url('../fonts/icomoon/ourotherfontname.ttf?t9csor') format('truetype'), url('../fonts/icomoon/ourotherfontname.svg?t9csor#ourotherfontname') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"],
[class^="anoterclassprefix-"],
[class*="anotherclassprefix-"] {
speak: none;
line-height: 1;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-family: 'ourotherfontname';}
/* Better Font Rendering =========== */
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;
}
So I'm having problems understand why IE is ignoring my CSS here. I have this code:
<h2>Har du stadsnät eller kan du få det?</h2>
I.e. nothing weird or anything.
And here is the resulting rendering:
But here is the CSS code for this HTML:
.rubrik, h2 {
font-family: Lato;
font-size: 32px;
font-weight: normal;
line-height: 38px;
font-variant: normal;
font-style: normal;
color: #969696;
}
Which clearly states that the H2 should have "normal" as font weight, yet the rendered text is clearly bold, here is a correct rendering (from Safari)
So, using the included developer tools of Internet Explorer 8, I inspect the CSS interpretation, and that looks like this:
As I understand it, what I am looking at here is IE8's interpretation of my CSS, and suspiciously missing is the "normal" attribute. IE has converted the CSS to the one-line version of "font" but didn't include the "normal" part. Now, the font "Lato" is a font-face font, and the font-face CSS is here:
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato.eot');
src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
font-style: italic;
}
Even when specifying "normal" in the font-face declaration for font-weight, it doesn't work. So I'm stuck here, trying to figure out what I am doing wrong not to have IE include "font-weight: normal" in the declaration for H2... Any guesses? Thanks in advance...
I think you need to change the name of the font-family: Lato; on each fontface property, as IE is possibly getting confused. Instead try putting font-family: Lato-bold;, font-family: Lato-italic etc. Also, if the font has a bold face (like Lato does and you have referenced in the fontface properties) then you do not need to add font-weight: bold; for a fontface property, as the font is already bold and adding the font-weight will just add faux-bold and make it look bad.
This means that for your h2, you only need to put font-family: Lato; if you want it to be the normal, non-bold version.
This may be an inheritance issue. Have you tried putting the !important keyword.
font-weight: normal !important;
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.