I included a True Type Font in the #font-face CSS setting so that Android browsers can display a certain web font:
#font-face {
font-family: 'GNU FreeMono';
font-style: normal;
font-weight: 400;
src: url('fonts/GNU_FreeFont/FreeMono.woff') format('woff');
src: url('fonts/GNU_FreeFont/FreeMono.ttf') format('truetype');
}
However, this inclusion causes other browsers (Google Chrome, Firefox, etc) to download the .ttf file instead of the compressed .woff file. Reversing the order of src will cause Android browsers to be unable to display the web font. This seems to defeat the purpose of having the .woff file.
Is there a way for CSS to make non-Android browsers use the .woff file and support Android's use of .ttf at the same time?
Related
#font-face {
font-family: 'Somefont;
src: url('fonts/somefont.eot');
src: url('fonts/somefont.eot?#iefix') format('embedded-opentype'),
url('fonts/somefont.woff') format('woff'),
url('fonts/somefont.ttf') format('truetype'),
url('fonts/somefont.svg#Somefont') format('svg');
font-weight: normal;
font-style: normal;
}
This is the css we usually use for embedding a font on a webpage.
I am a font designer and therefore I know (and have seen) that the curves of ttf are distorted always a bit when the design was converted from an otf font. (I use fontsquirrel Web font generator).
Is there a way to replace the whole ttf file with the otf and is this reliable on all browsers specially webkit?
I made some experiments and found it quite confusing to say which data is actually used by specific browsers.
What I want to achieve is to abolish as much as possible the ttf files in the favor of otf.
Thanks a lot for answers.
I found this answer here regarding graphic design:
https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This is exactly what my fonts are doing, but I'm trying to find out if there's a way to prevent this using html or css or anything web-based.
I'm using "platin" as my font. Do I just need to find a different font?
Any other thoughts on the topic?
If this is caused by using web fonts, I found this SO post (and the accepted answer) helpful: Google webfonts render choppy in Chrome on Windows
My solution was to use the Webfont Generator tool (http://www.fontsquirrel.com/tools/webfont-generator) to convert my font into the variety of web formats and copy their provided CSS into my stylesheet. I was using the Fauna One font from Google, so I had to download it from Google and then upload it into FontSquirrel.
The key is to put the SVG line above TTF, so that Chrome uses it first. Here's what worked for me:
#font-face {
font-family: 'Fauna One';
src: url('fonts/faunaone-regular-webfont.eot');
src: url('fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg'),
url('fonts/faunaone-regular-webfont.woff') format('woff'),
url('fonts/faunaone-regular-webfont.ttf') format('truetype');
}
(This is 99% the same as the CSS file generated by the Webfont Generator, just rearranged a bit).
To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:
#font-face {
font-family: 'Futura';
src: url('futura.eot');
src: url('futura.eot?#iefix') format('embedded-opentype'),
url('futura.woff') format('woff'),
url('futura.ttf') format('truetype'),
url('futura.svg#futura') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Futura';
src: url('futura.svg#futura') format('svg');
}
}
Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.
Another thing: This trick will cause the browser to download two versions of the font but that's a small price to pay for good looking text!
Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration
<font-face units-per-em="2048" ascent="1900" descent="-510" />
You can change the value for ascent and get it to match the other font format versions.
I've ran into an issue with font-family; basically I'm doing all the right things (I hope) yet for some reason the font is doing some weird things. So let me explain the issue..
On my browser the font appears OK in chrome/IE yet it doesn't appear in mozilla.
On my dad's laptop, the font doesn't appear what-so-ever in any browser.
On my mates apple mac, the font appears in Safari but not in chrome.
On iPhone the font appears.
On Nexus 4 the font doesn't appear (in Chrome or Mozilla)
This is why I'm confused; Why is it appearing in some browsers on different platforms and not on the others? Can a font be specific to an OS?
Here's the CSS i'm using.
#font-face {
font-family: "Pixelated";
src: url('templates/joostrap/fonts/pixelated.ttf');
}
This is how i'm applying it.
{font-family: "Pixelated"; text-transform: uppercase;}
Any help would be appreciated! cheers!
The most common problem with fonts not showing up is that the path was not properly specified. This happens more when you have multiple file fonts such as: light, bold, medium. So perhaps your path is
src: url('templates/joostrap/fonts/pixelated.ttf');
But if multiple versions are in one directory, it could be
src: url('templates/joostrap/fonts/pixelated/pixelated.ttf');
This happened to me before. In my case I had the fonts.css in my CSS directory, then i had the fonts in assets and the variations of the fonts were in the same directory. In my case I had to implement the Across the Road font. So based on my directory structure I did
#font-face {
font-family: 'across_the_roadregular';
src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot');
src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/across_the_road/across_the_road-webfont.woff2') format('woff2'),
url('../assets/fonts/across_the_road/across_the_road-webfont.woff') format('woff'),
url('../assets/fonts/across_the_road/across_the_road-webfont.ttf') format('truetype'),
url('../assets/fonts/across_the_road/across_the_road-webfont.svg#across_the_roadregular') format('svg');
font-weight: normal;
font-style: normal;
}
Notice that I specified various file types. This is because not all browsers can display the .ttf format. You can see compatability at http://caniuse.com/#feat=ttf
TTF fonts must be used differently when using in Chrome and Firefox. Check this link to setup the TTF correctly:
ttf files not rendering on Chrome and Firefox
The problem is that you're only using a .ttf file. Not every browser will be able to load it.
Instead you should use a generator (link) so you have a .eot and a .woff file aswell.
Your font CSS will look like this:
#font-face {
font-family: 'Pixelated';
src: url('../fonts/pixelated.eot');
src: url('../fonts/pixelated.eot?#iefix') format('embedded-opentype'),
url('../fonts/pixelated.woff') format('woff'),
url('../fonts/pixelated.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope this helped.
Specify a font named "myFirstFont", and specify the URL where it can be found
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
Include a font file somewhere on your server, and refer to it with CSS
src: url('Sansation_Light.ttf')
If the font file is located at a different domain, use a full URL instead
src: url('http://www.w3schools.com/css3/Sansation_Light.ttf')
I think this link helps you http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use #font-face like this:
#font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other #font-face usage works perfectly fine in all browsers.
Btw, in Chrome, I get a warning:
Resource interpreted as Font but transferred with MIME type application/octet-stream
What can I do to cleanly include a locally stored font which is not installed on the OS?
Edit:
I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttf url in the first place, but not if it's somewhere else!
2nd Edit:
I got it to work in all browsers except firefox:
#font-face {
font-family: 'OpenSymbol';
src: url('file:<path>/openSymbol.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSymbolEOT';
src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
...
and then
.element {
font-family: OpenType, OpenTypeEOT, [...];
}
Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O
Btw, firefox has problems because of security issues: See here
You just need one font file in web open font format. Go to http://www.fontconverter.org to convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on:
Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac)
Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on Windows 7 (PC)
Safari on iOS 10.3.1 (iPhone)
Chrome 57.0 and Asus Browser 2.0.3 on Android 5.0.2 (Asus tablet)
This goes in the css:
/* Add the decaration on top */
#font-face {
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..
No need to bother with Embedded OpenType (EOT) fontfiles, because they are only needed for IE9 (2011) and IE10 (2012).
No need to bother with Scalable Vector Graphics (SVG) fonts, because they're no longer needed since iOS 5.0
Already since 2012 Web Open Font Format (WOFF) is fully supported by every known browser. Truetype Fonts (TTF) are used local on iMac and PC, and can be used local on Android and iPhone as well. That's why web developers often make this mistake, using TTF instead of WOFF for a site.
It might be the browser is just not supporting the .ttf file. Consider working with fontsquirrel, it will generate all required files (.ttf, .woff, .svg, .eot) and css for you, and works in all browsers. I use it all the time...
According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with #font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:
#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 */
}
Taken from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
EDIT: One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.
I'm working on a website that requires font trials online, the fonts I have are all .otf
Is there a way to embed the fonts and get them working on all browsers?
If not, what other alternatives do I have ?
You can implement your OTF font using #font-face like:
#font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}
#font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}
// Edit: OTF now works in most browsers, see comments
However if you want to support a wide variety of browsers i would recommend you to switch to WOFF and TTF font types. WOFF type is implemented by every major desktop browser, while the TTF type is a fallback for older Safari, Android and iOS browsers. If your font is a free font, you could convert your font using for example a transfonter.
#font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
If you want to support nearly every browser that is still out there (not necessary anymore IMHO), you should add some more font-types like:
#font-face {
font-family: GraublauWeb;
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 */
}
You can read more about why all these types are implemented and their hacks here. To get a detailed view of which file-types are supported by which browsers, see:
#font-face Browser Support
EOT Browser Support
WOFF Browser Support
TTF Browser Support
SVG-Fonts Browser Support
From the Google Font Directory examples:
#font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
This works cross browser with .ttf, I believe it may work with .otf. (Wikipedia says .otf is mostly backwards compatible with .ttf) If not, you can convert the .otf to .ttf
Here are some good sites:
Good primer:
http://www.alistapart.com/articles/cssatten
Other Info:
http://randsco.com/index.php/2009/07/04/p680