Using fonts with Wordpress in different Browsers - html

So I've read that there is a bug on Chrome for Windows which cause bad rendering. Is this the same for Opera? And why isn't it working for IE?
Font: http://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville
Embedding:
wp_enqueue_style('fontbask', 'http://fonts.googleapis.com/css?family=Libre+Baskerville:400,500,700,400italic&subset=latin,latin-ext');
CSS I've tried
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-stroke: 1px transparent;
Result:
Brwoser versions:
Opera 19.0.1326.63
Chrome 32.0.1700.107 m
Internet Explorer 11.0.9600.16518
Firefox 26.0
I also tried to use font-face to include the fonts, which had exactly the same result.
#font-face {
font-family: 'LibreBaskerville';
src: url('fonts/LibreBaskerville-Regular.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
I downloaded the fonts # http://www.fontsquirrel.com/fonts/libre-baskerville?q[term]=baskerville&q[search_check]=Y
In this screenshot it doesn't look that bad, but you can see live here: http://www.citizen-science.at/wordpress/
I also found that the font from http://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville is rendered as badly as well. So it seems it is a browser issues.
When I'm using my local fonts instead of Google fonts, IE is able to show it, but Opera and Chrome still don't

Opera have issue in font rendering. this will help you finding the solution. If Google fonts are not must use for you then i recommend this website for web font generation. This works awesomely with cross browser compatibility.
#font-face {
font-family: 'libre_baskervilleregular';
src: url('librebaskerville-webfont.eot');
src: url('librebaskerville-webfont.eot?#iefix') format('embedded-opentype'),
url('librebaskerville-webfont.woff') format('woff'),
url('librebaskerville-webfont.ttf') format('truetype'),
url('librebaskerville-webfont.svg#libre_baskervilleregular') format('svg');
font-weight: normal;
font-style: normal;
}
Web fonts generated from fontsquirrel. Use this, these will work with cross browser compatibility including Opera.
good luck!

Related

#font-face Font doesn't render in IE

I have some fonts that are used throughout my site and in IE the font doesn't render correctly (at all). I've done some researching around and it appears I need to set it to installable embedding allowed. I've tried using http://carnage-melon.tom7.org/embed/ but when I download the embed.exe the terminal doesn't appear. This is only an Issue in IE works fine in chrome, opera, safari and firefox.
IE Console Log:
CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable.
CSS
#font-face {
font-family: 'droid-sans-regular';
src: url('../fonts/DroidSans-webfont.woff') format('woff'),
url('../fonts/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
you need the eot font type for ie:
src: url('../fonts/DroidSans-webfont.eot'); /* IE9 and above */
src: url('../fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), /* IE8 */

Custom Font not working on Firefox and IE. Chrome Fine

Recently I used a custom font on my websites. After uploading it to a server, I was only able to view the font in Google Chrome. In Firefox and IE, the font switched back to Times New Romans. However, after uploading it to another server, both FF and Chrome can view it but IE still can't. Is there any way to ensure that all browsers can use the font?
Make sure your #font-face rule like below
#font-face {
font-family: "Calibri";
src: url('fonts/calibri_2.eot');
src: url('fonts/calibri_2.eot?#iefix') format('embedded-opentype'),
url('fonts/calibri_2.svg#Calibri') format('svg'),
url('fonts/calibri_2.woff') format('woff'),
url('fonts/calibri_2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

#font-face url pointing to local file

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.

IE Problem with True Type Font

I intalled a new font on my website but I cannot get IE8 and IE9 to recognize, I have no knoledge on how the browsers render the fonts, but my css style sheet font declaration is as follows,
#font-face {
font-family: VAGRounded; src: url("../fonts/VAGRoundedW01-Light.eot") /* EOT file for IE */
src:url("../fonts/VAGRoundedW01-Light.eot?#iefix") format('embedded-opentype');
}
#font-face { font-family: VAGRounded; src: url("../fonts/VAGRoundedW01-Light.TTF") format('truetype'),
url("../fonts/VAGRoundedW01-Light.svg#webfontmvIrHXJB") format('svg');
Much help is appreciated!!
IE8 and IE9 do not support embedded fonts via the CSS3 scheme without first converting into supported formats (SVG, TT, EOT, etc.). EDIT: IE8 and IE9 requires tweaks to support embedded fonts. See the comments on your question since it's a duplicate.
FYI IE10 will be the first IE browser to support the HTML5 standard.
There are nifty other methods of embedding fonts. The one I recommend is Cufon because it uses VML in older browsers and doesn't require flash.
http://cufon.shoqolate.com/generate/
You should consider using a service like Font Squirrel.
It generates all the code for the various browsers.
Output would look something like this
#font-face {
font-family: 'LivingstoneRegular';
src: url('../livingst-webfont.eot');
src: url('../livingst-webfont.eot?iefix') format('eot'),
url('../livingst-webfont.woff') format('woff'),
url('../livingst-webfont.ttf') format('truetype'),
url('../livingst-webfont.svg#webfont44PDl6Sr') format('svg');
font-weight: normal;
font-style: normal;
}
http://www.fontsquirrel.com/fontface/generator
Try a proper syntax: Fontspring Syntax, Further Hardening of the Bulletproof Syntax, Mo’ Bulletproofer, or Smiley.

Using .otf fonts on web browsers

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