Hi guys I have a custom font set with #font-face but it shows the wrong font
#font-face {
font-family: antipasto_bold;
src: url('../assets/fonts/Antipaso-Pro-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
*,
*::before,
*::after{
font-family: "antipasto_bold";
}
The font it's rendering is wrong but it shows 'antipasto_bold' in the console
Make sure you've downloaded the font to your working directory e.g. assets/fonts and also check your console if there's any error you can share so as to know what exactly is the problem.
In your src: url line you have the font name as "Antipaso..." where everywhere else you refer to it as "anitpasto..." Is it referenced correctly?
Where did you download your font from? I got the font from https://en.bestfonts.pro/font/antipasto-pro. Double check the file name, because that was the issue I had. It was not "Antipaso-Pro-Bold.woff" but in fact "AntipastoPro-Bold.woff".
#font-face {
font-family: "antipasto_bold";
src: url('../assets/fonts/AntipastoPro-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
Related
Let's say I have the following font face definitions:
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: url("../fonts/open-sans.regular.woff") format("woff");
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans.light.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('../fonts/open-sans.semibold.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/open-sans.bold.woff') format('woff');
}
In Chrome's dev tools, I can tell which font family is being used:
But is there a way to tell which specific font file is being used? I'm trying to verify that the browser is actually using the bold version of the font, for example, instead of doing its own 'fake' bolding on the regular version of the font.
To answer my own question, Nikul Khatik gave the correct answer. Chrome dev tools doesn't support this feature, but Firefox's does:
So use Firefox to get the actual font face that's used for an element.
In Chrome there is no way to know which font file is loaded but you can get good hints by check out the "Rendered Fonts" in "Computed" tab and then check font files name in "Application" tab
check Rendered Fonts:
check font files name:
Open Chrome DevTools (Right click > Inspect)
Go to Sources tab
Look for the font folder (if you're using Google Font, go to ☁fonts.gstatic.com)
Open subdirectories if any, you'll get the actual font file being
used
In Safari, in Resources it will tell. you the specific font files that are loaded.
Fonts
fontfileBold.ttf
font is not working
here is CSS code
#font-face {
font-family: 'Soolidium', sans-serif;
font-style: normal;
src:url(http://localhost/changingCinema/font/Soolidium.ttf) format('truetype');
}
heading
{
float:left;
width:100%;
margin-bottom:10px;
font-size:54px;
font-family: 'Soolidium', sans-serif;}
this is HTML
<heading>My heading</heading>
only working when I install this font in my window otherwise not.
Help me plz fast thank you.
In Font face set font family name
#font-face {
font-family: 'Soolidium';
font-style: normal;
src: url('http://localhost/changingCinema/font/Soolidium.ttf') format('truetype');
}
For all browser support you have to give url from different font file.
(.eot/.woff/.ttf/.svg)
First of all make sure you put your #font-face before any other styles.
If possible you might also need to add additional rules for browser support like this:
#font-face {
font-family: 'Soolidium', sans-serif;
src: url('Soolidium.woff2') format('woff2'),
url('Soolidium.woff') format('woff'),
url('Soolidium.ttf') format('truetype');
}
And as always check for spelling errors or pointing to the wrong path.
Remember you are calling this from your CSS file so you need to point relatively to the font folder.
Try replacing:
src:url(http://localhost/changingCinema/font/Soolidium.ttf) format('truetype');
with:
src: url('../font/Soolidium.ttf');
Assuming you have a folder named 'font' in your root directory with the font 'Soolidium.ttf' in.
I would like to know If we can upload any font on our website ??
Where can I download a font or google font and upload it on my css file directly like that :
#font-face { font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: 300;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); }
instead of use this sort of code :
#import url(http://fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900);
thank you
See don’t use #import.
Prefere LINK tag :
<link rel='stylesheet' href='a.css'>
Download Source Sans Pro webfont and make CSS file with these rules :
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Regular.otf');
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Bold.otf');
font-weight: bold;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Italic.otf');
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-BoldItalic.otf');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Light.otf');
font-weight: 300;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-LightItalic.otf');
font-style: italic;
font-weight: 300;
}
Using a Custom Web Font
I found this youtube video online. It gives the instructions step by step.
https://www.youtube.com/watch?v=KPwG67lEFdc
I listed the steps here go to http://www.google.com/fonts/
find a font that you like, click the quick use link. Scroll down again and copy the link that looks like the following.
http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Next integrate the fonts into your CSS. The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Open Sans', sans-serif;
True, like #Jukka said, some fonts aren't free, so you'll have to search. Luck is that:
Raleway - http://www.fontsquirrel.com/fonts/raleway
and Open Sans - http://www.fontsquirrel.com/fonts/open-sans
are free, so you just have to download the TTF (big blue button), inside the zip there's the whole set of weights and styles of the font.
Then you have two options:
Upload the .ttf directly to your ftp and call it into your css, as you stated; or
Use the Webfont Generator (http://www.fontsquirrel.com/tools/webfont-generator) to create another types (.woof, .eot, .svg), because of browsers.
FYI, Chrome in the last few versions (< 39) had a problem with some fonts, and just the .svg extension corrected the bug.
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!