In html5 i have used a custom font(Universe 55 font). I downloaded .ttf file,used with #font-face rule & checked with IE,Chrome,mobile browsers. It doesn't work, but in websites they say browsers will support this font-type.
Do i need to use any other file formats for font.
I have used #font-face rule as,
#font-face
{ font-family: 'Universe2';
src: url("C:\Users\..\Desktop\Fonts\Univers LT 55 Roman.ttf"); }
.custfont
{ font-family: 'Universe2';
font-size:25px; }
<body><div class='custfont'>This is a customized font</div></body>
You have to link it via the project for example your project is at d:/projectname inside you have font file you link it like this in CSS:
#font-face {
font-family: 'MyFont';
src: url('myfont.eot'); /* IE9 Compat Modes */
src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('myfont.woff') format('woff'), /* Modern Browsers */
url('myfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Add the Univers LT 55 Roman.ttf in your project...
Related
Over the years, I've used the following font-face declaration:
#font-face {
font-family: 'museo_sans_rounded';
font-style: normal;
font-weight: 500;
src: url('../fonts/museo/museosansrounded-300-webfont.eot');
src: url('../fonts/museo/museosansrounded-300-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museo/museosansrounded-300-webfont.woff2') format('woff2'),
url('../fonts/museo/museosansrounded-300-webfont.woff') format('woff'),
url('../fonts/museo/museosansrounded-300-webfont.ttf') format('truetype'),
url('../fonts/museo/museosansrounded-300-webfont.svg#museo_sans_rounded300') format('svg');
}
Now I just need to support IE11 and all the modern browsers. Can this declaration be simplified?
According to this article on embedding custom fonts using #font-face:
The #font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.
There are various different levels of browser support for different fonts. The trend seems to be that you can get away with offering WOFF and WOFF2, but this is their recommendation for "deepest possible browser support":
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
For IE11:
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}
.eot ==> for IE9 Compat Modes
.eot?#iefix ==> for IE6-IE8
.woff2 ==> for super Modern browser like Chrome, Firefox...
.woff ==> for pretty Modern.. so to speak
.ttf ==> specially for Safari, Android, iOS
.svg#svgFontName ==> just for Legacy iOS
When I use this on my style tag the font works just fine with FireFox and Google Chrome And Edge :
#font-face {
font-family: 'AlArabiyaRegular';
src :url('template/fonts/ae_AlArabiya.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
but it's not working on IE so I seareched about it and it's looks like I have to use 'woff' and 'eot' in order to make it work with IE so I used this code :
#font-face {
font-family: 'AlArabiyaRegular';
src: url('template/fonts/ae_AlArabiya.eot');
src: url('template/fonts/ae_AlArabiya.woff') format('woff'),
url('template/fonts/ae_AlArabiya.tff') format('truetype'),
url('template/fonts/ae_AlArabiya.svg#webfontg8dbVmxj') format('svg');
}
but when I change my style to it's not working even on FireFox
Use all the css font family src posibilities:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
If a .ttf works in other browsers but not IE, it's usually a sign that the font hasn't got the "installable bit" set. See this thread for more info and fixes.
I have a bit of code that I'm using to create barcodes using a Code39r.ttf font.
When using it on my local machine it seems to work fine
<html>
<head>
<style>
#font-face {
font-family:code;
src: url(Code39r.ttf);
}
#myFont {
color:#111111;
font-size:180px;
font-family:code;
}
</style>
</head>
<body>
<p id="myFont">123 456</p>
</body>
</html>
As soon as I try to load the font from an online source it never seems to load
https://jsfiddle.net/jhc7p69p/2/
not sure what could have gone wrong or if there is a reason for this
you use custom font you require more font file like.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
I have wrote a css for add "HelveticaNeueLT Std Thin" font for my website. But that css doesn't work for IE browers, also that font can't convert to eot via http://www.fontsquirrel.com/tools/webfont-generator
That website gives error "Adobe has requested that their font HelveticaNeueLT Std Thin Regular be blacklisted by the Generator. You will not be able to convert this font."
So I convert this form another website but didn't work,
This is my css, this work for other browers, But IE has problem.
#font-face {
font-family: Helvetica_Thin;
src: url("fonts/HelveticaNeueLTStd-Th_0.otf") format("opentype");
src: url("fonts/HelveticaNeueLTStd-Th_new.eot"),
url("fonts/HelveticaNeueLTStd-Th.ttf") format('truetype'),
url("fonts/HelveticaNeueLTStd-Th_new.eot?#iefix") format('embedded-opentype');
}
this is link for download above font http://font2s.com/fonts/50728/helvetica_neue_lt_std_35_thin.html#.VBvpBxYsD3Y
Try to write this format
#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 */
}
This is the code I am using.
#font-face {
font-family:gotisch;
src:url('__cmsurl__/files/www/dscaslongotisch.ttf') format:('truetype');
}
h1{
font-family:gotisch;
}
the source is correct, the CMS automatically sets the url, but the font is not displayed in neither Chrome nor Firefox.
When I do use this code:
#font-face {
font-family:gotisch;
src:url('__cmsurl__/files/www/dscaslongotisch.ttf') format:('truetype');
}
#font-face {
font-family: gotisch_IE;
src:url('__cmsurl__/files/www/dscaslongotisch.eot');
}
h1{
font-family:gotisch, 'gotisch_IE';
}
it is working in IE, but still not in Firefox / Chrome
Firebug even shows me, that the font is loaded and I can change it to e.g. Verdana - but still, this one is just not displayed. I even tried fontsquirrel, but even then it did not display the font. Can anyone help me here?
Taken from here you can see that the fonts you provide (ttf and eot) are for IE, Safari, Android, iOS.
#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 */
}
Convert the font to woff and include it like below if you want it to work in Firefox and Chrome.
#font-face {
font-family: 'gotisch';
src: url('path_to/gotisch.eot'); /* IE9 Compat Modes */
src: url('path_to/gotisch.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('path_to/gotisch.woff') format('woff'), /* Modern Browsers */
url('path_to/gotisch.ttf') format('truetype'), /* Safari, Android, iOS */
}
Then use it like this
selector {
font-family: 'gotisch';
}