Bootstrap - about fonts files (.eot .svg .ttf .woff and .woff2) roles and usages
They are included because each font was created to solve different problems. Woff and woff2 are the newest formats which were designed to stop font piracy. Svg is also a newer format which is a vector file and used on iOS mobile devices. Tff and eot are old school formats used by old browsers, but they allow anyone to download and use the font for free.
Short answer: They are all included for multi-version cross-browser compatibility.
See: Why should we include ttf, eot, woff, svg,... in a font-face
Why should we include ttf, eot, woff, svg,... in a font-face
Answer in 2019:
Only use WOFF2, or if you need legacy support, WOFF. Do not use any other format
(svg
and eot
are dead formats, ttf
and otf
are full system fonts, and should not be used for web purposes)
Original answer from 2012:
In short, font-face is very old, but only recently has been supported by more than IE.
eot
is needed for Internet Explorers that are older than IE9 - they invented the spec, but eot was a proprietary solution.ttf
andotf
are normal old fonts, so some people got annoyed that this meant anyone could download expensive-to-license fonts for free.Time passes, SVG 1.1 adds a "fonts" chapter that explains how to model a font purely using SVG markup, and people start to use it. More time passes and it turns out that they are absolutely terrible compared to just a normal font format, and SVG 2 wisely removes the entire chapter again.
Then,
woff
gets invented by people with quite a bit of domain knowledge, which makes it possible to host fonts in a way that throws away bits that are critically important for system installation, but irrelevant for the web (making people worried about piracy happy) and allows for internal compression to better suit the needs of the web (making users and hosts happy). This becomes the preferred format.2019 edit A few years later,
woff2
gets drafted and accepted, which improves the compression, leading to even smaller files, along with the ability to load a single font "in parts" so that a font that supports 20 scripts can be stored as "chunks" on disk instead, with browsers automatically able to load the font "in parts" as needed, rather than needing to transfer the entire font up front, further improving the typesetting experience.
If you don't want to support IE 8 and lower, and iOS 4 and lower, and android 4.3 or earlier, then you can just use WOFF (and WOFF2, a more highly compressed WOFF, for the newest browsers that support it.)
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
Support for woff
can be checked at http://caniuse.com/woff
Support for woff2
can be checked at http://caniuse.com/woff2
Linking to Glyphicon Fonts Between Sites (Bootstrap)
Font files are subject to cross domain access controls. You either need to put the font files in each website. Deactivate the cross domain access controls on the server hosting the font files. Or configure the server hosting the fonts files to permit access by the domains of your sites.
For apache, you need to set some of the settings in the apache master confiuration file(s) or else in the .htaccess for the domain that serves the font files. You will have to modify the following to fit your sites. You will need to have the mod_headers apache module loaded or compiled into the server.
This sets the content types and encodings for the font files.
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType application/vnd.ms-fontobject .eot
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
This sets the access control to permit access from "sample.com"
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "sample.com"
</IfModule>
</FilesMatch>
Naturally different browsers will behave differently, so as always test these changes across all browers possible. For servers other than Apache, you will have to use their configs to do the same as above.
Replace "sample.com" with your website's url, you can also replace "sample.com" with "*", however doing so, will deactivate controls on font files. It opens your server to provide these files to any other site that may attempt to access them.
How to change bootstrap.css font-family HTML to my own downloaded font
Just use following CSS to your CSS file which should include after bootstrap
..
@font-face {
font-family: <Your-font>;
src: url(<your-font-path>);
}
html, body {
font-family: <Your-font>, sans-serif; /*Specify your font name here*/
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Glyphicons with bootstrap 3.3.4 not working in rails 4.2.1
You have a mistake in your SCSS. The @font-face
should be declared as follows:
@font-face {
font-family: 'Glyphicons Halflings';
src: url(font-path('glyphicons-halflings-regular.eot'));
src: url(font-path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'),
url(font-path('glyphicons-halflings-regular.woff2')) format('woff2'),
url(font-path('glyphicons-halflings-regular.woff')) format('woff'),
url(font-path('glyphicons-halflings-regular.ttf')) format('truetype'),
url(font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
}
Note that there are exactly 2 src
specifications. The first src
has one url()
, and the second src
has multiple url()
declarations separated by commas, not semicolons.
Having some problems with glyphicons from bootstrap 3.3.5 in Firefox
Based on the jsfiddle you posted for the problem, it appears you are missing the required CDN. After I included these:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script
It displayed the glyphicons. Make sure you have these included in your page and it should work. :)
Related Topics
How to Include a CSS Stylesheet in Orchard Module
CSS Start Repeating Background from Defined Position
Probleme CSS3 Scale Transform and Overflow:Hidden on Safari
CSS - Floating Two Elements Side by Side
Scss Function for Animation Keyframes
How to Test CSS Properties for a React Component Using React-Testing-Library
CSS3 Transform Scale and Container with Overflow
How to Style Radio Buttons with Different Colors
How to Stretch a Header Across a Web Page Background with CSS
Ie7 and "Inherit": Ignoring Entire Rule
Fieldset Contents Overflow in Firefox
Internal Stylesheet Not Working in Ie9 with Jsf
CSS - Advantages of Single Image File Vs Multiple Files
CSS3 Background-Size Cover to Percentage Animation Zoom
Do You Put Ie Conditionals in The CSS File or in The HTML File