I know that these questions are very often asked, but I wanna know what is wrong with my code.
When I try to load the font, IE wont display the font.
Here is my code:
#font-face {
font-family: CalistoMTItalic;
src: url('../fonts/CALISTI.oet');
src: url('../fonts/CALISTI.oet?#iefix') format('embedded-opentype'),
url('../fonts/CALISTI.TTF') format('truetype');
}
Does anybody know the mistake?
The mistakes include:
mistyping file name extension .eot as .oet
using just EOT and TTF formats
not contacting Microsoft regarding legal use of their font
The correct extension is eot, not oet.
Also, make sure the path to the font files is relative to the url of the css file.
If that doesn't fix your issue then please see related topics on StackOverflow - I see at least 4 with an almost identical title in the "Related" column on the right-hand side of this question.
Related
I'm trying to include a font in my HTML code, but I'm not able to do it. The font is this one:
It has several "sub-fonts", and I want to choose between them, but I'm not able idk why. Other fonts that also has "sub-fonts" work as expected, eventhough I cannot choose between "sub-fonts"
I wrote the following code to test:
lang=html"<span style="font-family:Formula1 Display-Regular; font-size:2em">Safety Car</span>
First of all I wanna know if it is possible to put the font without using CSS. The second is, how am I supposed to do it (using HTML if possible, and also CSS?
Use #font-face and it will work as you expected. Check for typo in font-name make sure to use correct punctuations.
#font-face{
font-family:"formula1-display-regular";
src:url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("woff"),
url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("opentype"),
url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("truetype");
}
<span style="font-family:formula1-display-regular;font-size:2em">Safety Car</span>
Codepen link
PS: This snippet might not work here, but will work on the above codepen link.
When you use external fonts in your web development you have to Import that font in your CSS file. But sometimes CDN links are not available for some fonts. So in that case you have to use the #font-face property to use that font and import that font from local files.
I have provided #font-face CSS for formula1 font. So you have followed some steps.
Copy this #font-face CSS code which I provided below and paste it into your CSS file.
After that visit this Website and download .ttf file, add this file to your project folder.
Now you can use the external font.
A. For more details about #font-face property Click here Now
B. And for Video tutorial Click here Now
Note: Please make sure that your file path is correct
#font-face{
font-family:"formula1-display-regular";
src:url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("woff"),
url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("opentype"),
url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("truetype");
}
I found a service that allow me to download web fonts:
https://www.fontsquirrel.com/fonts/daniel
I am not a web developer but I am helping to someone to figure out what went wrong.
Here is a web site that uses custom fonts: http://senschild.com
I've implemented:
#font-face{
font-family: 'Daniel-Regular';
src: url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot');
src: url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?iefix') format('eot'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.woff') format('woff'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.ttf') format('truetype'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.svg#webfont') format('svg');
}
but it does not work for me. The font is still system on the page.
What I did as well:
I also fixed this one as you said and fixed this part '../ as we don't need to move up as Maneesh said. Also I've edited css by removing font-family:JakobCTT; from body, but still does not work. I even added english words assuming that the font only for english characters.
The font files you are using appear to be corrupt, as Failed to decode downloaded font indicates. I've had this problem many times before when using the webfont generator on https://www.fontsquirrel.com.
Edit:
If you download the .OTF file and generate the webfont with https://www.web-font-generator.com/ it appears to work just fine.
Here is your fix:
Add style to the html elements you want to apply the font for. If you want the font to be applied for the whole webpage, then add the following style for body tag either in html or css.
font-family: 'Daniel-Regular';
Try this:
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?#iefix')
instead of
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?iefix')
There should be a ?#iefix not just a ?iefix
I have a jsfiddle set up with just a basic #font-face css and an h2. The font files that the css is referencing are all on the server, however if you enter the url for the woff file it says its not found. I have triple checked that the file exists exactly where it is pointing but I guess you just can't see woff files by entering them into url bars (edit: same for the svg).
So, why is the font in this jsfiddle not in open sans?
http://jsfiddle.net/rw2sbq8y/1/
html
<h2>Search for inventions</h2>
css
h2 {
font-family:'open sans-test';
font-size:24px;
font-weight:normal;
}
#font-face {
font-family: 'open sans-test';
src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot');
src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.woff') format('woff'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.ttf') format('truetype'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
(I am having an issue with fonts on the website I'm currently working on and I think this bit right here is the first step to fixing it)
Is the server hosting the fonts your server, or a 3rd party server like a CDN?
If it's yours, a common problem that I have encountered in the past is that the server doesn't know how to serve the font to you.
Fixing this is normally a simple matter of adding the MIME type for each font format type inc. EOT, WOF etc. To the server.
You should do a Google search on how to do this for your server type (eg if it's IIS, or Apache or something else).
Eg "how to add mime type to IIS".
You can also find the correct MIME type for each font format by doing a search. The results come up pretty easy to find, but here is a big list of valid MIME types (just find the ones you need from the list): http://www.freeformatter.com/mime-types-list.html
Trying to find a way to get better antialiased rendering of fontawesome icons in chrome in windows i found that using 'otf' format solve the problem.
i used in fontawesome.css:
src: url('../font/fontawesome.otf?v=3.1.0') format('opentype'),
url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
rendering is very good in chrome with a minor issue "in some icons the very top of the icon is cropped", other browsers render the icons clearly without any issue.
my question, why otf version is not used in fontawesome to fix chrome bad rendering issue, the otf file is already present but not included in css?
Have you tried this?
I have a problem with icons getting cut off at the top but loading the otf file doesn't fix it.
As chrome can also load svg fonts then the opentype will be downloaded and then overridden with an extra http request for the svg.
So it seems like you are downloading extra data and ending up with the same result?
I've been working on my first HTML5/CSS3 site, and it's been going well for the most part. Totally loving the new #font-face property, and it works perfectly on my machine. The problem I'm having is when previewed on another device (computer, ipad, iphone), it doesn't seem to be recognising the #font-face property and uses the fallback font instead.
Site link: http://williamben.com/
Here's the CSS I'm using:
#font-face { font-family: 'League Gothic';
src: url('_/type/league_gothic.otf') format('otf');
}
Any help would be appreciated.
Thanks in advance.
It is working on your computer as you have the font installed. If you disable the fonts it will not work. It is a common mistake using web fonts as most fonts people use as web fonts they also have installed, so if the web font declaration is wrong, they don't spot it.
It looks like the reason is because you are pointing to a font that doesn't exist, or you have the path wrong. http://williamben.com/_/type/league_gothic.otf doesn't exist.
Agree with dstorey. Also, maybe check out font squirrel to get more coverage:
http://www.fontsquirrel.com/fontface/generator
From the looms of things the file path may be wrong. But youll still want to use the fontsquirrel generator because it will give you a few more lines of code that ensure the font works in near every browser. Then has a fallback to a basic font stack if all else fails.