This question already has answers here:
What is the status of TTF support in Internet Explorer?
(2 answers)
Closed 8 years ago.
In my CSS style sheet, the first entry is
#font-face {
font-family: "Font";
src: url(link) format("truetype");
}
p.customfont {
font-family: "Font", Verdana, Tahoma;
}
This is not a font commonly installed on computers. Chrome loads this font and uses it in the correct places, but IE 9 will not. Now as a lot of people still use IE, this got me worried. I tried on a lot of other computers, and chrome works fine on all, but IE also fails on all.
How can I fix this?
EDIT: For future reference - http://everythingfonts.com/font-face converts the ttf for you to all the formats needed, and creates the css - so a lot of time saved
Generally you should use eot, woff, ttf and svg to support all browsers.
Example:
#font-face {
font-family: 'font';
src: url('../fonts/font.eot'); /* IE9 Compat Modes */
src: url('../fonts/font.eot') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/font.woff') format('woff'), /* Modern Browsers */
url('../fonts/font.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/font.svg#PlanerRegular') format('svg'); /* Legacy iOS */
}
Related
This question already has answers here:
Downloading a Google font and setting up an offline site that uses it
(12 answers)
Converting and rendering web fonts to base64 - keep original look
(3 answers)
Closed 4 years ago.
I need to use a font in an HTML page but I also need it to work offline, when I have the project on my PC without internet connection. Since I can download the .ttf file from Google Fonts, is there a way to actually include the font without importing it from fonts.googleapis.com?
I believe you can include the font on your server/ local storage and use a local link, instead of the url.
#font-face{
font-family: /*name here*/
font-style: normal
font-weight: 250
src: url('') /* replace with local link/ format*/
}
See: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp for more detail
You can certainly do that. Use the #font-face in your .css file
#font-face {
font-family: 'FontName';
src: url('FontName.eot'); /* IE9 Compat Modes */
src: url('FontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FontName.woff2') format('woff2'), /* Super Modern Browsers */
url('FontName.woff') format('woff'), /* Pretty Modern Browsers */
url('FontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('FontName.svg#svgFontName') format('svg'); /* Legacy iOS */
}
the URL would be specified accordingly, depending on what folder you have the font in, relative to the CSS file.
I have a problem with the font on the server. Localhost works, but the server has a different directory and does not read. With Logo is the same.
#font-face
font-family: BankGothic;
src: url('/assets/fonts/BankGothic.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/BankGothic.woff') format("woff"), /* Pretty Modern Browsers */
url('/assets/fonts/BankGothic.ttf') format('truetype'); /* Safari, Android, iOS */
The logo is made as a component
Is it possible to integrate this font and logo?
Try using absolute path for linking your font.
e.g
#font-face
font-family: BankGothic;
src: url('http://www.example.com/assets/fonts/BankGothic.eot'); /* IE9 Compat Modes */
src: url('http://www.example.com/assets/fonts/BankGothic.woff') format("woff"), /* Pretty Modern Browsers */
url('http://www.example.com/assets/fonts/BankGothic.ttf') format('truetype'); /* Safari, Android, iOS */
Maybe it helps you out. But if it's working on your localhost than it should be working on your server also. Unless and until you are following different directory structure on server. But this is obvious that your issue is regarding src path
I thought maybe something with
environment.apiUrl
But I do not know if it has the right to do it
I am new in rendering fonts with #font-face. I am using Gill Sans font family in my design.
I did research to understand make it work for me but I am not able to understand how to use it. The font type I am using dont have .eot and .woff font type. I can just see gill sans font true type font in my font folder.
I would like to see if anyone can help to understand how it works and make it easy for me to use this.
I am not able to understand what is happening in the below code.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Unfortunately, different browsers want fonts in different formats. You can generate the other formats from your .ttf file here:
http://www.fontsquirrel.com/tools/webfont-generator
You can then use your font in CSS using the name you defined (MyWebFont).
body {
font-family: MyWebFont;
}
I am making a website for a friend of mine. He is very specific about the font on the page.
I have downloaded a custom font from the Internet, but the weird thing; it's only working in Internet Explorer (what a suprise).
This is my code:
#font-face
{
font-family: eurostile;
src: url(../font/eurostile.ttf);
}
#font-face
{
font-family: eurostile;
src: url(../font/eurostile.eot);
}
And this is how I am calling the font-family:
p
{
font-family: eurostile;
}
etc... What am I doing wrong?
You'll need to format it in a cross platform style. Look here.
The problem is that different browsers support different font styles.
Something like:
#font-face {
font-family: 'fontMN';
src: url('/fonts/font_font-webfont.eot'); /* IE9 Compat Modes */
src: url('/fonts/font_font-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/font_font-webfont.woff') format('woff'), /* Modern Browsers */
url('/fonts/font_font-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/font_font-webfont.svg#fontMN') format('svg'); /* Legacy iOS */
}
Would work.
You will need to acquire the formats that are valid for the browsers you're looking to support, as seen above.
Browser use different formats. IE uses the eot format, most use woff, but some use svg or ttf/otf.
Check this out:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
You can create all these fonts by uploading a ttf/otf to fontsquirrel and using it's converter:
http://www.fontsquirrel.com/tools/webfont-generator
http://jasonlau.biz/home/css/embedding-custom-fonts-with-css
If you ever need to embed custom fonts in your website, this bit of CSS will accomplish the task. Follow the steps below to embed custom fonts in your website.
Use this tool to generate the font-face rule - http://www.fontsquirrel.com/tools/webfont-generator.
I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use #font-face like this:
#font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other #font-face usage works perfectly fine in all browsers.
Btw, in Chrome, I get a warning:
Resource interpreted as Font but transferred with MIME type application/octet-stream
What can I do to cleanly include a locally stored font which is not installed on the OS?
Edit:
I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttf url in the first place, but not if it's somewhere else!
2nd Edit:
I got it to work in all browsers except firefox:
#font-face {
font-family: 'OpenSymbol';
src: url('file:<path>/openSymbol.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSymbolEOT';
src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
...
and then
.element {
font-family: OpenType, OpenTypeEOT, [...];
}
Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O
Btw, firefox has problems because of security issues: See here
You just need one font file in web open font format. Go to http://www.fontconverter.org to convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on:
Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac)
Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on Windows 7 (PC)
Safari on iOS 10.3.1 (iPhone)
Chrome 57.0 and Asus Browser 2.0.3 on Android 5.0.2 (Asus tablet)
This goes in the css:
/* Add the decaration on top */
#font-face {
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..
No need to bother with Embedded OpenType (EOT) fontfiles, because they are only needed for IE9 (2011) and IE10 (2012).
No need to bother with Scalable Vector Graphics (SVG) fonts, because they're no longer needed since iOS 5.0
Already since 2012 Web Open Font Format (WOFF) is fully supported by every known browser. Truetype Fonts (TTF) are used local on iMac and PC, and can be used local on Android and iPhone as well. That's why web developers often make this mistake, using TTF instead of WOFF for a site.
It might be the browser is just not supporting the .ttf file. Consider working with fontsquirrel, it will generate all required files (.ttf, .woff, .svg, .eot) and css for you, and works in all browsers. I use it all the time...
According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with #font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Taken from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
EDIT: One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.