I have the code below in my css file. The font renders as desired in all browsers on Mac OS, but will not render on Windows. Now before you say it's not Windows compatible, I have made a dummy page on the Windows machine, and it runs the '.woff' file fine in Chrome (not IE). Hovever IE can render this page. I feel like I'm missing something important in the #font-face. Here is my code:
#font-face { font-family: Skia;
src:url('./webfonts/skia.ttf') format('truetype'),
url('./webfonts/skia.eot') format('embedded-opentype'),
url('./webfonts/skia.woff') format('woff'),
url('./webfonts/skia.svg');
font-weight: lighter;
font-style: normal;
}
the 'webfonts' folder is in the same directory as the 'styles' folder where the css files are located.
>styles
>'style.css'
>webfonts
>'skia.ttf / woff / eot / svg'
In the <body> tag, I'm including font-family:Skia, sans-serif;
It looks like you're on the right track
#font-face {
font-family: "sansation";
src: url("fonts/sansation_light.eot");
src: url("fonts/sansation_light.eot?#iefix") format("eot"),
url("fonts/sansation_light.ttf") format("truetype"),
url("fonts/sansation_light.woff") format("woff"),
url("fonts/sansation_light.svg") format("svg");
font-weight: 200;
font-style: normal;
}
You do want to include the format, ie fixes for older versions of ie, woff for opera, and svg for mobile devices. This format usually never does me wrong!
Also, you can safely omit ./ since it relates to the current directory. You also should to include the font-weight and font-style. Checkout how google webfonts does this.
Related
My question should be strange but it has it's own sense.
My web browser is not compatible with woff format, and is not Internet explorer but a modified version of IE for sure.
This web browser is running by an hmi application based on TIA Portal (siemens), with this browser I need to look, using siemens web browser, an html page generated by one vision system.
This video system is using an icon font in woff format, and is not compatible with my web browser.
My idea was that to convert the font in ttf and install it locally on pc, but this don't work on my pc and olso in the hmi (hmi is running a windows 7 embedded version) and I don't understand why it doesn't work in each pc!
the css generated by the sensor is this:
#font-face {
font-family: 'fontello';
src: url('fontello.eot?60611638');
src: url('fontello.eot?60611638#iefix') format('embedded-opentype'),
url('fontello.wof?60611638') format('woff'),
url('fontello.svg?60611638#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Obviously i cannot change the generated html.
Why the browser don't use the font converted and installed locally??
Your #font-face rule is missing a .ttf url, as well as a local reference
Try this:
#font-face {
font-family: 'fontello';
src: local('fontello'),
url('fontello.ttf') format('truetype'),
url('fontello.eot#iefix') format('embedded-opentype'),
url('fontello.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
See also: MDN Docs: #font-face
Sorry if this is a stupid question but I imported a font stored on my computer into a CSS file and, although it works in Chrome, it doesn't in Microsoft Edge or Internet Explorer. I don't have any other browsers so I can't check with those and I was wondering if anyone would know why.
Linking CSS:
#font-face {
font-family: 'Linotte';
src: url('...\font\Linotte\Linotte.otf') format('otf'),
url('...\font\Linotte\Linotte.woff2') format('woff2'),
url('...\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I read that Edge doesn't have .woff2 support, so I figured linking both the .otf and .woff versions would help, but it hasn't. I get the following error in my Chrome console on any page that uses this font for both the .woff and .woff2:
Failed to load resource: net::ERR_FILE_NOT_FOUND
However, that error doesn't show up in the Edge console or the IE console.
When I go into sources, this is what shows up (won't let me imbed images yet, I'm very new): Sources
The folder the Linotte folder is in is in the same folder as the folder the CSS sheet is in, so I don't understand why it isn't showing the right thing.
Try replacing the three ... with ..:
#font-face {
font-family: 'Linotte';
src: url('..\font\Linotte\Linotte.otf') format('otf'),
url('..\font\Linotte\Linotte.woff2') format('woff2'),
url('..\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Also the convention is to use forward slashes, not backward.
I've seen several questions asked here and on other blogs but it didn't solve my case. This is my syntax:
#font-face {
font-family: "texgyreheroscn";
src: url("texgyreheroscn-italic-webfont.eot");
src: url("texgyreheroscn-italic-webfont.eot?#iefix") format("embedded-opentype"),
url("texgyreheroscn-italic-webfont.woff") format("woff"),
url("texgyreheroscn-italic-webfont.ttf") format("truetype"),
url("texgyreheroscn-italic-webfont.svg#texgyreheroscnitalic") format("svg");
font-weight: normal;
font-style: italic;
}
this works everywhere except in IE9 (IE8 works too). The syntax looks fine to me, the .eot file is on the server and has permissions to be accessed.
i've tried
adding src: local('☺︎'), - this breaks the font for every browser (as seen on #font-face works in IE8 but not IE9)
asked the backend guys if the .eot font was there and was accessible and the answer is YES
substituted the " with '
added format("embedded-opentype") on the first src: line
nothing seems to work for me. any heads up on this? thanks
I use fontsquirrel's CSS for #font-face:
#font-face {
font-family: 'pf_agora_serif_promedium';
src: url('pfagoraserifpro-medium-webfont.eot');
src: url('pfagoraserifpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('pfagoraserifpro-medium-webfont.woff') format('woff'),
url('pfagoraserifpro-medium-webfont.ttf') format('truetype'),
url('pfagoraserifpro-medium-webfont.svg#pf_agora_serif_promedium') format('svg');
font-weight: normal;
font-style: normal;
}
It works correctly in all browsers if
a)I use fonts that fontsquirrel generated.
b)I don't use cyrilic charset or another characters that could be on my font file but fontsquirrel does not converting at all (like russian letters ЯЩЮИГЛЬЦЫЧ)
So, when I changed my font files on my directory to another (which contain russian letters) IE9 and lesser don't show my font at all, even if I use only latin charset, but it works correctly (with latin and cyrilic charset) in normal browsers. So what's wrong. Does the problem inside of font files? And if not, why font-face don't working when I changing only font files?
p.s. I'd tried to use another CSS for font-face but they didn't work at my web-site.
i think fonts path is not giving you,
Please check fonts local path, may i sure working in all browser this #font-face kit,
EOT fortmat for ie8 and ie 9
#font-face {
font-family: "pf_agora_serif_promedium";
src: url("yourlocalpath/pfagoraserifpro-medium-webfont.eot");
src: local("☺"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.woff") format("woff"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.ttf") format("truetype"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.svg#LucidaFax-bold") format("svg");
}
Check the site:
http://tinyurl.com/caljnqb
I'm using font-face:
#font-face {
font-family: 'SegoeUI';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'SegoeUIBold';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: 'SegoeUIItalic';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
font-style: italic;
font-weight: normal;
}
And there is the problem with output in Firefox, Chrome and Opera browsers. Everything looks OK on IE. Font looks sharp. Why does it happens? Maybe I'm doing something wrong?
different browsers render fonts differently.
The solution I've used in the past is to re-arrange the order in which the fonts are supplied to the font face, based on which browser is rendering the page. Usually my problems are in the earlier versions of IE so I've used a separate style sheet that offered the .woff file before the ttf file. Because some browsers can only read certain font type files but can read both and stop looking after finding one that works. If you re-arrange them you may be able to use one that renders a bit better.
If you end up using separate css you can use the $_SERVER arrays http_user_agent property to set a font css based on the browser.
googles Droid font is a font that renders funny sometimes depending on the browser as well so researching that might help you find other approaches.
It seems that there are a few tricks in ordering properly each format
See for example
This is the Fontspring bulletproof syntax modified to serve the svg
first:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
From http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
You may also take care of using the proper mime type for WOFF font , as of http://www.w3.org/TR/WOFF/#appendix-b
application/font-woff
to ensure proper handling by the browser