I cannot get my #font-face to work. It registers when I inspect element, but it only triggers the backup serif font. This is how I have it set up:
#font-face {
font-family: 'Wremena';
src: url('./fonts/Wremena Light.woff') format('woff'),
url('./fonts/Wremena Light.woff2') format('woff2'),
url('./fonts/Wremena Light.ttf') format('truetype'),
url('./fonts/Wremena Light.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
and how its used:
.name {
font-family: 'Wremena', serif;
font-weight: lighter;
font-size: 2em;
line-height: 1em;
}
The site link is here:
www.koreatownmovie.com
Don't use all those formats. Start by just using woff/woff2. Then, remember that #font-face is you telling the CSS engine what it needs to do when it seens font-... instructions. In this case, you told it to load the font from the URL(s) you gave only when it sees font-weight: normal and font-style: normal, but then in your page CSS you use "font-weight: lighter". Since you didn't tell the CSS engine what to do when it sees that font-weight, it will not use that custom font: you didn't tell it to.
If you want it to use your font irrespective of a particular font-... property, don't add that property
#font-face {
font-family: Wremena;
src: url('./fonts/Wremena Light.woff') format('woff'),
url('./fonts/Wremena Light.woff2') format('woff2');
}
Done. This font should now get used irrespective of font-style, or font-weight, etc.
Related
For example the Victor Mono font has vastly different (ie. properly designed) Italic and Oblique styles, and I'm using it as my prefered programming font, however I can't seem to make it properly show both styles at the same time in code editors/text processors or on a webpage.
When I installed the font on my local system, both Italic and Oblique shows the Italic variant, I figured it might be an issue with the OS font system, so I tried to embed the fonts with CSS like this
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;
}
but now both
html {font-family:Victor Mono; font-weight:normal; font-style: italic;}
and
html {font-family:Victor Mono; font-weight:normal; font-style: oblique;}
shows the Oblique style. While if I re-order the #font-face rules to put the Italic one below the Oblique one like this
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
both Italic and Oblique styles will show the Italic variant. So it seems font-style: italic and font-style: oblique are actually interpreted as the same rule by the render engine and the rule appears later will override the former one?
So how should I show different italic and oblique font styles? For example I'd like VSCode to show comments in Italic style while reserved keywords in Oblique style. Currently it shows Italic all the time for both comments and reserved keywords which hurts my eyes when I look through the code.
I think its beacause of same font-family name, try this out:
#font-face {
font-family: 'Victor Mono Normal';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'Victor Mono Oblique';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;}
#font-face {
font-family: 'Victor Mono Italic';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;}
The dist css in the Github repo only links the italic version - I've seen issues when oblique is referenced in this way, so that may be causing problems. The demo site's css declares them separately like Fahim Khan's answer mentions, so that may be what you have to do if you want to reference them separately.
I'm not sure the designer intended for you to be able to use the three styles together like that, or how it would be done - the example code only uses the normal and italic together. IIRC, most editors have a separate bold font setting you can set to a different font - this may be how they're combining them in their editor, by setting that to the italic version.
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.
In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal. The issue is sporadic - it will render fine a few times, then I refresh and everything is in italics, then I refresh and it's back to normal.
I'm using this #font-face declaration:
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
Theres a comment on this article that indicates it could be about the order of the #font-face declarations: however the only thing that stopped the problem was removing the italic declarations altogether.
Another Stack Overflow answer suggests using the Font Squirrel #font-face generator; I'm not able to do this however as the web font files I'm using have DRM.
Is there a way to solve this without completely removing the italic declarations?
UPDATE: Upon further investigation, it seems this issue affects IE8 as well, not just in compatibility mode.
For each of your #font-face font-family names, create a custom name instead.
Example:
#font-face {
font-family: 'DINnormal';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DINbold';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DINitalic';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DINboldItalic';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
After those CSS rules are defined, then you can include specific CSS rule:
li {
font: 18px/27px 'DINnormal', Arial, sans-serif;
}
If, like me, you came across this question while experiencing a similar issue using TypeKit fonts, this entry from the TypeKit blog explains how you can force unique font-family names for each weight & style of a TypeKit font to address it.
I was having a similar issue, web font was showing in Italic when using IE8(Emulator), after digging and digging I came across a article that suggest emulator can sometimes be misleading especially when it comes to webFonts, and what it suggested was trying the site in the actual IE8, as I am using a windows 7 machine i wasn't able to download the real thing so I used this site called http://www.browserstack.com/ (No testers or fake browsers. Test in real browsers including Internet Explorer 6, 7, 8, 9, 10 and 11.)
and i noticed my font was not italic anymore :D
Here's the link to the article i read,
http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/
Hope this helps you guys, if i came across something like this when researching it really would have saved me a few hours
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 using this service to create #font-face rules in my CSS. What I've done is created two rules, one for the normal weight font and another for the bold weight version. Like so:
#font-face
{
font-family: 'CenturyGothicRegular';
src: url('/static/fonts/gothic_2-webfont.eot');
src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/gothic_2-webfont.woff') format('woff'),
url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
... and another for 'CenturyGothicBold'
I've then made the overall font for my site default back to Verdana like so:
body
{
font-family: "CenturyGothicRegular", Verdana;
font-size: 14px;
}
And made a little rule for <strong> so that rather than making the normal weight version bold (which just seems to stretch it), the bold weight version will be used:
strong
{
font-weight: normal;
font-family: 'CenturyGothicBold';
}
An issue I can foresee here is that if the font has defaulted to Verdana, bold won't be present.
Is there a way that I can specify a new set of rules for <strong> that only apply if the font has defaulted to Verdana?
There is no need to find a trigger to see if a fall back font has been used.
What you need to do is set the the font-weight in the #font-face rule, using the same family name. So you would now call it CenturyGothic:
#font-face {
font-family: 'CenturyGothic'; /* this used to be CenturyGothicRegular */
src: url('/static/fonts/gothic_2-webfont.eot');
src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/gothic_2-webfont.woff') format('woff'),
url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'CenturyGothic'; /* this used to be CenturyGothicBold but the urls still need to point to the files they were pointing at */
src: url('/static/fonts/gothic_2-webfont.eot');
src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/gothic_2-webfont.woff') format('woff'),
url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
font-weight: bold;
}
body{
font-family: "CenturyGothic", Verdana;
font-size: 14px;
}
strong{
font-weight: bold;
}
This will combine the two fonts into one font-family allowing it to act like any other font-family i.e. when you make it bold it will display the bold version of the font etc.
Using font-weight only with the same font-family will not work when you have several weight, like Light, ultralight, condensed bold, demi bold etc.