I have some custom fonts in my project and reference them by using #font-face.
But when the SASS is compiled the src gets all wrong, pointing to the original folder. I want it to point to the current folder where the CSS file is.
SASS:
#font-face {
font-family: Default;
src: url("Poppins-Medium.ttf");
}
#font-face {
font-family: Regular;
src: url("Poppips-Regular.ttf");
}
#font-face {
font-family: SemiBold;
src: url("Poppins-SemiBold.ttf");
}
#font-face {
font-family: Bold;
src: url("Poppins-Black.ttf");
}
Compiled SASS:
#font-face {
font-family: Default;
src: url("../../STYLE/Layout/Poppins-Medium.ttf"); }
#font-face {
font-family: Regular;
src: url("../../STYLE/Layout/Poppips-Regular.ttf"); }
#font-face {
font-family: SemiBold;
src: url("../../STYLE/Layout/Poppins-SemiBold.ttf"); }
#font-face {
font-family: Bold;
src: url("../../STYLE/Layout/Poppins-Black.ttf"); }
I want the source to be "Poppins-Black.ttf", since they are in the same folder.
I ended up copying the font files to the build folder and reference them from there,
I have downloaded .ttf files from google fonts to my local css folder, but can't seem to load them properly. I have tried these approaches:
CSS
#import url('./css/css?family=Cabin+Condensed:400,500,600,700');
#font-face {
font-family: 'Cabin Condensed';
font-style: normal;
font-weight: 700;
src: local('Cabin Condensed') format('truetype');
}
body, html {
font-family: 'Cabin Condensed', sans-serif;
}
HTML
<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">
I don't get any errors, but the font is not displayed either.
Strangely, the official docs don't even mention local fonts.
Seems to me the problem is using the local path which requires the font to be installed locally.
Try dropping the #import and add a fallback of src: url to your src: local:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url(<path to the TTF file>);
}
e.g:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}
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;
}
#font-face {
font-family: "Gotham";
src: font_path("gotham-rounded-medium.otf") format("opentype");
}
I have this in my CSS file and I still can't fetch the font. Any help?
You need to specify url, also I believe it's font-path, not font_path
#font-face {
font-family: "Gotham";
src: url(font-path("gotham-rounded-medium.otf")) format("opentype");
}
More here: http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/
If the font file is in your assets directory, try
#font-face {
font-family: "Gotham";
src: url('/assets/gotham-rounded-medium.otf') format("opentype");
}
Try
#font-face {
font-family: "Gotham";
src: url("gotham-rounded-medium.otf");
}
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!