If we have the following font-face setup (generated from fontsquirrel.com)
#font-face {
font-family: 'FrescoSansProNormal';
src: url('frescosanspro-normal-webfont.eot');
src: url('frescosanspro-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('frescosanspro-normal-webfont.woff') format('woff'),
url('frescosanspro-normal-webfont.ttf') format('truetype'),
url('frescosanspro-normal-webfont.svg#FrescoSansProNormal') format('svg');
font-weight: normal;
font-style: normal;
}
What browser instance are we covering by using the truetype format? Aren't all the browsers covered by the other 3 (woff, eot, svg)?
Older Android browsers (namely 2.1~2.3) can't render woff/eot/svg. see http://caniuse.com/#search=woff
Related
This question already has answers here:
Multiple font-weights, one #font-face query
(5 answers)
Closed 6 years ago.
I'm hoping to understand what the difference is between embedding fonts in a site like this:
#font-face {
font-family: 'Kulturista Medium';
src: url('fonts/Kulturista Medium.eot');
src: local('☺'), url('fonts/Kulturista Medium.woff') format('woff'), url('fonts/Kulturista Medium.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Kulturista Semibold';
src: url('fonts/Kulturista Semibold.eot');
src: local('☺'), url('fonts/Kulturista Semibold.woff') format('woff'), url('fonts/Kulturista Semibold.ttf') format('truetype'), url('fonts/Kulturista Semibold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Kulturista Semibold Italic';
src: url('fonts/Kulturista Semibold Italic.eot');
src: local('☺'), url('fonts/Kulturista Semibold Italic.woff') format('woff'), url('fonts/Kulturista Semibold Italic.ttf') format('truetype'), url('fonts/Kulturista Semibold Italic.svg') format('svg');
font-weight: normal;
font-style: normal;
}
vs. just loading one single font like this
#font-face {
font-family: 'Kulturista';
src: url('fonts/Kulturista.eot');
src: local('☺'), url('fonts/Kulturista.woff') format('woff'), url('fonts/Kulturista.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg');
font-weight: normal;
font-style: normal;
}
and styling with CSS
body {
font-family: 'Kulturista', Fallback, sans-serif;
font-style: italic;
font-weight: bold;
}
I imagine there's a benefit, otherwise you wouldn't want to load more resources.
Browsers read different types of font, so by using them all you can cover all the browsers, being cross-browser
TTF and OTF
They are supported in all modern browsers, except for Internet Explorer, for which they are only partially supported.
WOFF
it is supported by almost all browsers except older versions of Android Browser and older versions of iOS Safari.
EOT
is a font file type only supported by Internet Explorer, and works on versions Internet Explorer 8 and above
Regarding your main issue, using your 1st example is the best approach since changing the font-weight and font-style declarations of each #font-face rule to match each font’s properties, and using the same font-family name for each rule, we will no longer need to be overly specific in the CSS file.
You can read more here
I am developing a responsive web application. I encountered a problem that the font family doesn't work as expected on mobile, but it works as expected on a computer. Why is this the case?
Code:
HTML
<link href="css/fonts/fonts.css" rel='stylesheet' type='text/css' />
CSS
#font-face {
font-family: 'uni_sans_regularregular';
src: url('uni-sans-regular-webfont.eot');
src: url('uni-sans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-regular-webfont.woff') format('woff'),
url('uni-sans-regular-webfont.ttf') format('truetype'),
url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_bold_italicitalic';
src: url('uni-sans-bolditalic-webfont.eot');
src: url('uni-sans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bolditalic-webfont.woff') format('woff'),
url('uni-sans-bolditalic-webfont.ttf') format('truetype'),
url('uni-sans-bolditalic-webfont.svg#uni_sans_bold_italicitalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_boldregular';
src: url('uni-sans-bold-webfont.eot');
src: url('uni-sans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bold-webfont.woff') format('woff'),
url('uni-sans-bold-webfont.ttf') format('truetype'),
url('uni-sans-bold-webfont.svg#uni_sans_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_thinregular';
font-weight: normal;
font-style: normal;
}
Thanks in advance
First, open your SVG file with a text editor and find out if the name you've written in the hashtag for the SVG matches what it says in the file.
If it matches, try this, if not, adjust accordingly.
#font-face {
font-family: 'uni_sans_regular';
src: url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
src: url('uni-sans-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body { font-family:'uni_sans_regular',Arial,sans-serif; }
If the font still doesn't display on mobile then I'd assume your SVG or WOFF font files are corrupt, the path to the font file is not correct, or the files aren't downloading to the mobile device for some other reason (slow connection perhaps).
The SVG file should work for Firefox 3.5, Chrome 0.3, Safari 3.1, Opera 9, and all iOS devices. The TTF file will pick up IE9 and Android 2.2. You don't need the EOT file unless you want to cover IE8-. I just reduced it to the minimum number of includes so you can narrow down the issue.
If your hosting the file on an IIS server, you may need to adjust your server settings. IIS will not serve files with unknown MIME types so you must set the MIME type for SVG to image/svg+xml, similarly for WOFF. Instructions from Microsoft (link)
If your testing with a 3rd party browser app on your mobile device, try testing on the default browser that comes with the device because many 3rd party apps have their own quirks.
I have the following font setup in the CSS for a wordpress based site I'm building and the fonts display fine in FF, but not at all in IE(9) or Chrome(latest).
/* =Typography
-------------------------------------------------------------- */
#font-face {
font-family: 'Humanist';
src: url('fonts/humanist521lightbt-webfont.eot');
src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightBT.ttf') format('truetype'),
url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'HumanistIT';
src: url('fonts/humanist521lightitalicbt-webfont.eot');
src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightItalicBT.ttf') format('truetype'),
url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'HumanistBo';
src: url('fonts/humanist777blackbt-webfont.eot');
src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist777blackbt-webfont.woff') format('woff'),
url('fonts/Humanist777BlackBT.ttf') format('truetype'),
url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
When I need to use the font for an element, I just add font-family: 'Humanist', Arial, sans-serif;
The fonts are stored in the theme's directory in folder called "fonts".
Am I doing something wrong or missing something for it to work with other browsers?
Thanks
Internet Explorer 9 and less has some issues displaying .TTF files. It does not support embedded fonts via the CSS3 scheme without first converting into supported formats (.svg, .ttf, .eot, etc.). However, you can tweak your #Font-Face Syntax to support this.
With Chrome not displaying the correct font, this is due to different browsers having different needs. You can find more information in the second link in the more information below.
A side note as well: if your font is hosted on Google Fonts, embed a link into your website instead of hosting it yourself.
TLDR; need a comprehensive list of #font-face types
More information:
SO Question - IE problems with True Type Font files
SO Question - Font-Face problem in Chrome
Further Hardening of the Bulletproof Syntax - Fontspring.
Bulletproof #font-face syntax - Paul Irish
To use the font for an HTML element, then we need to use the #font-face rule of power full features of CSS3 that supported in many modern browser. CSS property font-family of HTML is used to defined the font name which we want to embed ans src property used to defined the path of the font to be embed.
#font-face
{
font-family: myfont;
src: url('(fontfile.eot') format('embedded-opentype'),
url('(fontfile.woff') format('woff'),
url('(fontfile.ttf') format('truetype'),
url('(fontfile.svg#(fontfile') format('svg');
}
div,h2
{
font-family:myfont;
}
I am using some fonts generated from FontSquirrel but it doesn't seem to that IE can't handle the fonts.. What am I doing wrong? This is not a public webpage.. It is builded to work on a local platform until I am ready to launch, that's why the domain name ends on .local.
#font-face {
font-family: 'proxima_light';
src: url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.eot');
src: local('proxima_light'), url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.svg#proxima_nova_ltregular') format('svg');
font-style: normal;
}
#font-face {
font-family: 'proxima';
src: url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.eot');
src: local('proxima'), url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'proxima';
src: url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.eot');
src: local('proxima'), url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.svg#proxima_nova_ltbold') format('svg');
font-weight: bolder;
font-style: normal;
}
As I said.. it is only IE that doesn't handle the font-face.. Every other browser does it well..
I'm not sure if this'll help, but IE has some similar cross-domain issues as FF. In this case, it might be that your absolute URL is making IE think your font is being served from a different domain. Have you tried using a relative path?
Does Dev Console return error on laod the font files, also could you please provide of the Responce Header of the font file.
I've faced with issue in IE 9 when it didn't use font file in case if Responce header contained Cache-Control: no-cache
I have tried a few different ways to include the correct fonts in the CSS. I know that I need the eot version for the font to work on IE, but I can't get it to recognize it. I have used font squirrel to convert the fonts, and I have placed the .eot file and .otf file in a folder called "fonts" Here is my CSS:
#font-face {
font-family: BebasNeue;
src: url('fonts/BebasNeue.eot');
src: url('fonts/BebasNeue.otf') format("opentype");
}
UPDATE
So through suggestions from below, I was led to this site: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
I used the CSS:
#font-face {
font-family: 'BebasNeue';
src: url('fonts/bebasneue.eot'); /* IE9 Compat Modes */
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/bebasneue.woff') format('woff'), /* Modern Browsers */
url('fonts/bebasneue.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/bebasneue.svg#svgBebasNeue') format('svg'); /* Legacy iOS */
}
Then I went back to Font Squirrel, downloaded the kit fresh again, and renamed everything correctly, and it worked.
You need to set Access-Control-Allow-Origin HTTP Header for this
See here:
IE9 blocks download of cross-origin web font
Does this work?
#font-face {
font-family: 'BebasNeue';
src: url('fonts/BebasNeue.eot');
src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue.otf') format("opentype");
}
On Fontsquirrel they do it this way
http://www.fontsquirrel.com/fontfacedemo/bebas-neue
Download the #font-face kit from there
#font-face {
font-family: 'BebasNeueRegular';
src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot');
src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'),
url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
This code should make it work..
if not, check your font URL (if it exists).
#font-face {
font-family: 'BebasNeue';
src: url('fonts/BebasNeue.eot');
src: local('BebasNeue'), local('BebasNeue'), url('fonts/BebasNeue.eot') format('embedded-opentype');
}
Sometimes when you convert font type (other that TTF) the font doesn't work.. Try to use TTF font and convert it..
I didn't experience that with TTF fonts.. but i did with other font types.
This is the css I have for Bebas on our site (not Neue), but note the URL:
#font-face {
font-family: 'Bebas';
src: url('../fonts/bebas-webfont.eot');
src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebas-webfont.ttf') format('truetype'),
url('../fonts/bebas-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}