Im trying to change my primary font on bigcartel. Heres what I have so far:
#font-face {
font-family: 'kollektifregular';
src: url('kollektif-webfont.woff2') format('woff2'),
url('kollektif-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
The font isn’t changing on my site so please let me know what to fix, thank you!
Using #font-face defines a font, but does not apply it. If you want to apply it somewhere, you can simply say:
h1 {
font-family: 'kollektifregular';
}
or if you want to use it everywhere:
* {
font-family: 'kollektifregular';
}
Related
I have a problem importing a font to my CSS file, and I can't understand the problem.
The code:
#font-face {
font-family: 'Reg';
font-style: normal;
font-weight: 400;
src: local('Reg'), url(carmelit.ttf) format('ttf');
}
body{
font-family: 'Reg';
}
This is not working, and not because I'm overriding it later on. The file "carmelit.ttf" is in the same folder as the CSS file.
format('ttf') should be format('truetype')
You can also remove the local info unless you're supporting ancient versions of IE.
You should also try like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
I have a collection of fonts. Let's say font-a-normal, font-a-italic, font-a-bold and so on with b, c...
If in some css file I have:
font-family: 'font-a-bold';
In another file, I could have
font-weight: bold;
The result actually is double bold font, that is two times thicker than what I need on some html pages. Because project specifications changed a lot over time and because I have a big number of static pages that I would have to change manually if I would want only to remove font-weight I'm searching for another solution.
Is there a rule or some way to specify that 'font-a-bold' shouldn't become thicker. And if I have
font-family: 'font-a-normal';
font-weight: bold
it should actually become:
font-family:'font-a-bold'
Is there a pure css solution?
Update
Or a fast and possibly clean way of removing double bold.
If you are pulling in all the fonts with #font-face declarations, you probably could do something like this:
#font-face {
font-family: 'MyFont-Bold';
font-weight: normal;
font-style: normal;
src: ...
}
#font-face {
font-family: 'MyFont-Bold';
font-weight: bold;
font-style: normal;
src: ... // same as above: always the same bold
}
#font-face {
font-family: 'MyFont';
font-weight: normal;
font-style: normal;
src: ... // regular weight new style
}
#font-face {
font-family: 'MyFont';
font-weight: normal;
font-style: normal;
src: ... // boldweight new style
}
I would think the browser doesn't care if what you tell it is a bold weight is not actually any bolder than the regular.
Fiddle
You can't tell CSS to not apply a certain style if another style is being applied, So...
I would simply do this by using the 'lots of classes' approach to CSS.
Make classes:
.bold {
font-family: 'font-a-bold';
}
.italic {
font-family: 'font-a-italic';
}
and so on. Then just apply these classes to the text you want to have said font-family. Just don't apply a <strong> tag to a piece of text that is already using the .bold class for example.
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;
}
I don't understand how to get this to work, any help would be appreciated;
I'm going off of what I got from this website: http://alistapart.com/article/cssatten
from my style.css
#font-face {
font-family: "JSL";
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Neither is the plus sign the issue (tested with my renamed fonts), nor do you have to import a separate css file at the top of your main css file.
However, you may need to have more versions of your font than just the true type. Have a look at Bulletproof #font-face Syntax.
You may use FontSquirrel’s generator to achieve this.
Here is an example of a #font-face embed in my application, which is pinned right at the top of my main css stylesheet.
#font-face {
font-family: 'JustVector';
src: url('../fonts/justvectorv2+webfont.eot');
src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
url('../fonts/justvectorv2+webfont.woff') format('woff'),
url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
font-weight: normal;
font-style: normal;
}
no
#font-face
Try get inport it:
#import_your_new_cssfile.css
whre you put:
font-face {
font-family: "JSL";
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Is perhaps the "+" sign in the font URL a problem? You might want to URL encode it.
Edit - after hitting the font URL, it looks like you should try to download the ttf file, and refer to it locally, rather than from a remote source. It's prompting me for a Captcha in order to download the file, which is probably why it's not working.
You do need to download the file and refer to it locally,
The link supported there is a download link and requires a Captcha to be downloaded which means it is NOT a direct link to the TTF File.
Depending on the Font you may need to use:
#font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'),
url('path/to/font/someFont.woff'), format('woff'),
url('path/to/font/someFont.ttf'), format('truetype'),
url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}
and in CSS:
BODY
{
font-family: 'someFont', Fallback, sans-serif;
font-size: 12px;
...
}
This worked for me when I had issues wityh embedding a custom font.
I really need help with #font-face code.
IT doesn't seem to see my font file.
I tried changing the path to anything I could think of, made new folders, renamed existing ones, put the font file in my root etc.
I'm testing in Firefox and Chrome.
Here are the codes that I tried in my CSS:
src: url(http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(../wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/thefalltheme/images/Univers.ttf);
src: url(../thefalltheme/images/Univers.ttf);
src: url(thefalltheme/images/Univers.ttf);
src: url(/images/Univers.ttf);
src: url(../images/Univers.ttf);
src: url(images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/Univers.ttf);
src: url(/Univers.ttf);
src: url(Univers.ttf);
src: url(../Univers.ttf);
Can you find out where I should put the font file or what to change in my CSS to get it to work?
(I also checked the similar questions here and elsewhere on the net and tried using this website to no avail.)
Thanks!
UPDATE:
bozdoz's suggestion doesn't work.
I used FontSquirrel to get the fonts.
This is the CSS:
#font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1{ font-size: 110px;
font-family: 'lane', georgia, serif;
color: #000000;
}
I used the name 'lane' just because bozdoz had it.
All of the fonts are here:
http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/
and these are their names:
univers-webfont.eot, univers-webfont.woof, univers-webfont.ttf, univers-webfont.svg
Are you using it correctly? Here is the format for #font-face. Notice the number of files. You can use Font Squirrel to create all of the necessary fonts for cross-browser compatibility. Also, it looks like you're using WordPress. I believe you have to use absolute paths (i.e. the first one in your list) in CSS on WordPress. Hope this helps.
<style>
#font-face {
font-family: 'lane';
src: url('type/lanehum-webfont.eot');
src: url('type/lanehum-webfont.eot?#iefix') format('embedded-opentype'),
url('type/lanehum-webfont.woff') format('woff'),
url('type/lanehum-webfont.ttf') format('truetype'),
url('type/lanehum-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.font { font-family:"lane", arial, serif; }
</style>
You want to do something like this:
#font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
The font definition file must be relative to your css file. So if your css is at:
/Content/css/main.css
Then your font must be located in the same folder. If you specify
#font-face { font-family: Delicious; src: url('fonts/Delicious-Roman.otf'); }
Then your font definition would be at
/Content/css/fonts/Delicious-Roman.otf
You might want to verify that your server is not blocking your fonts from being downloaded. Try the URL and see if you get a 404 or 403 at the given url.
You should try fontSuirrel's generator, their scripts have been vastly tested and compliant with many browsers. Choose advanced settings when generating your fonts. Certain browsers may not have the ability to use ttf as a font so they provide you with eot woff and ttf
My suggestions from the comments as an answer:
Try with quotes:
url("Univers.ttf");
Check you have font-family or otherwise you cannot use your font in your code:
font-family: "MyFontName";
Your custom font family you would use in css like:
p { font-family: "MyFontName", Arial, sans-serif; }
First of all, thank you all for your great, great help!
There was no problem with the #font-face code.
The problem was with my overall CSS.
You see, my CSS was written like this:
/*
Info
*/
#media screen {
* {
margin: 0px;
padding: 0px;
}
html { background: black url(images/bg.jpg); }
body { font: 14px/1.4 Georgia, serif; }
article, aside, figure, footer, header, nav, section { display: block; }
#font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
etc.
The problem was that #font-face wasn't seen because it was after #media screen!
After I put it in front of #media screen and after /* Info */ it worked flawlessly.
Also, seems like I can use absolute and relative paths when using Wordpress...
Once again, thank you all for all your help!