I want to change the default font used in my application. I have installed #font-face but not all of the elements were changed. Is it possible to use element 'body' and put font-family I want there? It'd be like :
body {
font-family: 'champagne'; }
I've put this :
#font-face {
font-family: Champagne;
src: url(css/font/Champagne_Limousines.TTF); }
If you are already using font-family on body like this
body {
font-family: 'Font Name';
}
It should apply to all elements if its not applying means font-family properties already defined for other elements as well. for example
p{
font-family: Arial;
}
for that you can use * selector like this
*{
font-family: 'Font Name' !important;
}
which will override all other elements, also you have to use web fonts for it and all other formats as well to support all browsers
EOT,WOFF,SVG & TTF
your Font face should look like this
#font-face
{
font-family: 'FontName';
src: url('FontName.eot');
src: url('FontName.eot?#iefix') format('embedded-opentype'),
url('FontName.woff') format('woff'),
url('FontName.ttf') format('truetype'),
url('FontName.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Related
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.
I have a couple of master css font-face declarations that look something like this:
#font-face {
font-weight: normal; font-style: normal;
font-family: 'myfont'; src: url('../fonts/myfont-Reg-webfont.eot'); src: url('../fonts/myfont-Reg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/myfont-Reg-webfont.woff') format('woff'), url('../fonts/myfont-Reg-webfont.ttf') format('truetype'), url('../fonts/myfont-Reg-webfont.svg#myfontRegular') format('svg');
}
#font-face {
font-weight: normal; font-style: normal;
font-family: 'myfontBold'; src: url('../fonts/myfont-Bold-webfont.eot'); src: url('../fonts/myfont-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/myfont-Bold-webfont.woff') format('woff'), url('../fonts/myfont-Bold-webfont.ttf') format('truetype'), url('../fonts/myfont-Bold-webfont.svg#myfontBold') format('svg');
}
Here and there, in the rest of the css these font-faces are referenced in the font-family tags.
e.g.
h3{ font-family: 'myfontBold',Arial, sans-serif;
The issue that I am trying to solve is that not all characters, such as é,ú,ó, etc., are available in myfont so I need to resort to a standard font for non-English versions. How can I override what "myfont" and "myfontBold" actually use? I want them to use arial, ideally without having to redeclare all classes that use myfont and myfontBold
I have tried including this in the head if in non-English mode
<style>
#font-face {
font-weight: normal; font-style: normal;
font-family: 'myfont'; src: local("Arial"); src:(sans-serif);
}
#font-face {
font-weight: bold; font-style: normal;
font-family: 'myfontBold';src: local("Arial"); src:(sans-serif);
}
</style>
but the original myfont is still active. Is there a way around this? I also tried, adding the !important to after the local("Arial").
I don't think you can actually override a font-family this way using only css and HTML, since your browser has no way of knowing which characters myfont doesn't have and overriding them. The only thing I can think of is a JavaScript or jQuery function which loops round whatever elements contain special characters and replace the the elements' font-family declaration with Arial:
function replaceSpecial(s) {
var a = ["é", "è", "â", "ô"];
$.each(a, function(index, value) {
if (s.text().indexOf(value) > -1) {
s.css("font-family", "arial");
};
});
}
$("span").each(function() {
replaceSpecial($(this));
});
span {
display:block;
width:100%;
margin:20px;
font-family: algerian;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Remplacez précisément tout ce qui n'est pas français</span>
<span>Le côté ... mon âge</span>
<span>This element's font should never be replaced</span>
I am using multiple web fonts of the same family to avoid browsers from rendering in faux-bold and faux-italics. When declaring selectors, I set the same name for all font-family properties and am using font-weight and font-style to differentiate.
Here's an example I'm using for Exo.
#font-face {
font-family: "exo";
src: url("../fonts/exo/exo-regular.eot");
src: url("../fonts/exo/exo-regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/exo/exo-regular.woff2") format("woff2"),
url("../fonts/exo/exo-regular.woff") format("woff"),
url("../fonts/exo/exo-regular.ttf") format("truetype"),
url("../fonts/exo/exo-regular.svg#exo") format("svg");
font-weight: "normal";
font-style: "normal";
}
#font-face {
font-family: "exo";
src: url("../fonts/exo/exo-bold.eot");
src: url("../fonts/exo/exo-bold.eot?#iefix") format("embedded-opentype"),
url("../fonts/exo/exo-bold.woff2") format("woff2"),
url("../fonts/exo/exo-bold.woff") format("woff"),
url("../fonts/exo/exo-bold.ttf") format("truetype"),
url("../fonts/exo/exo-bold.svg#exo") format("svg");
font-weight: "bold";
font-style: "normal";
}
p {
font-family: "exo", sans-serif;
}
I have confirmed that a paragraph tag is not inheriting font-weight from another selector.
From the above CSS I am expecting a <p/> tag to have a normal font weight. Instead, all instances of <p/> are bold. When checking the browser inspector, the font-weight, it reads as 'normal.'
I am also using Roboto with web fonts for all things normal, bold, italics, and bold-italics. Whatever is the last #font-face selector listed is what gets used be default.
I've seen different ways to implement this approach using different font-family names (e.g. font-family: "exo-bold"), but I shouldn't have to do that. My objective is to:
Use multiple web font files that represent the font in different states (e.g. exo-regular.woff, exo-bold.woff).
Use the same font-family name for all weight and style variants of the same font.
Include font-weight and font-style properties to identify those variants.
Set weight and style using other CSS or markup like <strong>.
It seems like I've done this before and it's worked. Can anyone spot an error in my approach?
No quotes should be used in your font-weight and font-style rules. This will work:
#font-face {
font-family: "exo";
/* files for normal weight */
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "exo";
/* files for bold weight */
font-weight: bold;
font-style: normal;
}
Actually, in CSS you only need quotes when you have spaces or other reserved characters in your font names or file names. So this should work:
<!-- language: lang-css -->
#font-face {
font-family: exo;
src: url(../fonts/exo/exo-regular.eot);
src: url(../fonts/exo/exo-regular.eot?#iefix) format(embedded-opentype),
url(../fonts/exo/exo-regular.woff2) format(woff2),
url(../fonts/exo/exo-regular.woff) format(woff),
url(../fonts/exo/exo-regular.ttf) format(truetype),
url(../fonts/exo/exo-regular.svg#exo) format(svg);
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: exo;
src: url(../fonts/exo/exo-bold.eot);
src: url(../fonts/exo/exo-bold.eot?#iefix) format(embedded-opentype),
url(../fonts/exo/exo-bold.woff2) format(woff2),
url(../fonts/exo/exo-bold.woff) format(woff),
url(../fonts/exo/exo-bold.ttf) format(truetype),
url(../fonts/exo/exo-bold.svg#exo) format(svg);
font-weight: bold;
font-style: normal;
}
p {
font-family: exo, sans-serif;
}
I personally only use quotes in CSS when it doesn't work without.
But you never quote normal CSS terms, as they'll stop working.
Hi I have a quick question on use CSS #font-face to create a font family.
Traditionally, I used to setup my CSS fonts like this:
#font-face {
font-family: 'My Font Regular';
src: url('fonts/myfont.ttf');
}
#font-face {
font-family: 'My Font Bold';
src: url('fonts/myfont-bold.ttf');
}
p { font-family: "My Font Regular";}
strong {font-family: "My Font Bold";}
However I've recently discovered that you can do it like this:
#font-face {
font-family: 'My Font';
src: url('fonts/myfont.ttf');
font-style:normal;
font-weight:normal;
}
#font-face {
font-family: 'My Font';
src: url('fonts/myfont-bold.ttf');
font-style:normal;
font-weight:bold;
}
p {
font-family: "My Font" ;
font-style:normal;
font-weight:normal;
}
strong {
font-family: "My Font" ;
font-style:normal;
font-weight:bold;
}
My question is, if I use the second technique in bold for example, will the text still render using the custom .eot or will the browser try to emulate it without the using the actual bold font file?
Thanks
If your font file is a bolded font, it would be redundant to set font-weight: bold and there's no need to declare font-weight: normal since that is the default value. You should also use more than .eot files so you have a fallback for other browsers like the others suggested.
Here is an example of what I use:
#font-face {
font-family: 'Franklin Demi';
src: url('FranklinDemi.eot'),
url('FranklinDemi.ttf') format('truetype'),
url('FranklinDemi.svg#font') format('svg');
}
#font-face {
font-family: 'Franklin Heavy';
src: url('FranklinHeavy.eot'),
url('FranklinHeavy.ttf') format('truetype'),
url('FranklinHeavy.svg#font') format('svg');
}
.sidansTitel{
font-family: 'Franklin Demi';
font-size: 22pt;
color: #8b9ba7;
text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}
.sidansTitel b{
font-family: 'Franklin Heavy';
font-weight: normal;
font-style: normal;
}
Setting both font-weight: normal; and font-style: normal; makes the font render well in ie/ff/chrome, without it it looked like crap in Chrome. I believe that it looked like crap in Chrome because it tried to render the bold font in bold, which should be fixed by this.
EDIT: spelling
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.