if you read the notes in font-squirrel’s font-face generator, you’ll see that it was a gotcha by paul irish. Here is the excerpt from his blog post: And.. regarding @font-face syntax I now recommend the bulletproof smiley variation over the original bulletproof syntax. @font-face { font-family: ‘Graublau Web’; src: url(‘GraublauWeb.eot’); src: local(‘☺’), url(‘GraublauWeb.woff’) format(‘woff’), url(‘GraublauWeb.ttf’) … Read more
Update September 10, 2014: You shouldn’t need to do any of the query string hacks below anymore since Cloudfront properly supports CORS now. See http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ and this answer for more info: https://stackoverflow.com/a/25305915/308315 OK, I finally got the fonts working using the config below with a little tweak from examples in the documentation. My fonts are … Read more
LOCALLY RUNNING THE SITE (file:///) Firefox comes with a very strict “file uri origin” (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference: security.fileuri.strict_origin_policy Set it to false and you should be able to load local font resources across different … Read more
Generically, you can use a custom font using @font-face in your CSS. Here’s a very basic example: @font-face { font-family: ‘YourFontName’; /*a name to be used later*/ src: url(‘http://domain.example/fonts/font.ttf’); /*URL to font*/ } Then, trivially, to use the font on a specific element: .classname { font-family: ‘YourFontName’; } (.classname is your selector). Note that certain … Read more
Actually there is a special flavor of @font-face that will permit just what you’re asking. Here’s an example using the same font-family name with different styles and weights associated with different fonts: @font-face { font-family: “DroidSerif”; src: url(“DroidSerif-Regular-webfont.ttf”) format(“truetype”); font-weight: normal; font-style: normal; } @font-face { font-family: “DroidSerif”; src: url(“DroidSerif-Italic-webfont.ttf”) format(“truetype”); font-weight: normal; font-style: italic; … Read more
There’s only one registered mediatype for SVG, and that’s the one you listed, image/svg+xml. You can of course serve SVG as XML too, though browsers tend to behave differently in some scenarios if you do, for example I’ve seen cases where SVG used in CSS backgrounds fail to display unless served with the image/svg+xml mediatype.
✖ works really well. The HTML code is ✖. An alternative is ✕: ✕
This means the network is slow, and Chrome is replacing a web font (loaded with a @font-face rule) with a local fallback. By default, the text rendered with a web font is invisible until the font is downloaded (“flash of invisible text”). With this change, the user on a slow network could start reading right … Read more
If your Rails version is between > 3.1.0 and < 4, place your fonts in any of the these folders: app/assets/fonts lib/assets/fonts vendor/assets/fonts For Rails versions > 4, you must place your fonts in the app/assets/fonts folder. Note: To place fonts outside of these designated folders, use the following configuration: config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/ For Rails … Read more
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 … Read more