I thought that the font squirrel webfont generator was used to make a font compatible for all the browsers. But I tried the classic
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
and it works for all the latest versions of the browsers Google Chrome, Mozilla Firefox, Opera, Microsoft Edge and even Internet Explorer... Is it used for older versions of the above? Thanks
The reason webfont generators continue to generate old fonts is because they follow the principle of "If it's not broken, why remove it?".
For example, EOT is is a font format that still occasionally shows up in font generators, despite being completely unnecessary in modern day. It supports Internet Explorer 6+.... and if you REALLY need to support a browser that's 20 years old, Font Squirrel can help with that.
...But in the modern day, you only need WOFF and WOFF2. The other font flavors are obsolete and unnecessary because all modern browsers can use .woff , and most can use .woff2 .
You can see compatibility here:
WOFF: https://caniuse.com/woff
WOFF2: https://caniuse.com/woff2
EOT: https://caniuse.com/eot
TTF/OTF: https://caniuse.com/ttf
As you said, the solution provided by Font Squirrel works great for all modern browsers.
However, if you need to target older versions I would recommend https://onlinefontconverter.com that generate a more complete #font-face css, also more font extensions are provided.
I use the following css when I need #font-face:
#font-face{
font-family:"Rage Italic";
src:url("../fonts/RageItalic.eot");
src:local("RageItalic"), local("RageItalic"), url("../fonts/RageItalic.woff") format("woff"), url("../fonts/RageItalic.ttf") format("truetype"), url("../fonts/RageItalic.svg#RageItalic") format("svg");
font-weight: normal;
font-style: normal;
}
Related
I'm using CSS, the font file .ttf, and the font "Dirty Headline".
my code looks like this:
#font-face {
font-family: 'Dirty Headline';
src: url("./fonts/Dirty Headline.ttf") format('truetype');
}
The Problem
On Chrome on Linux, the font works fine. However, on Mac on Chrome, the font doesn't work.
On Windows on firefox, it works fine, however on Linux on firefox it doesn't.
Why does my font not work on some browsers and operating systems? Also, How can I fix this?
***** Edit *****
I changed my code to
#font-face {
font-family: "Dirty Headline";
src: url("./fonts/Dirty Headline.ttf") format("truetype"),
url("./fonts/Dirty Headline.woff") format("woff"),
url("./fonts/Dirty Headline.woff2") format("woff2"),
url("./fonts/Dirty Headline.otf") format("opentype"),
url("./fonts/Dirty Headline.eot") format("embedded-opentype");
}
still the same result, I'm unsure how to debug this
Font formats varies depending on browser and OS ; your can create a set of files using tools like fontsquirrel (assuming of course you have the correct license for this use).
Plus formats like woff and woff2 are far lighter than ttf.
Web Open Font Format (WOFF) developed in 2009 as a wrapper format for TrueType and OpenType is supported by all modern browsers! Try converting the font to this format and use it!
I should use the font family Nunito [»] from the Google font library.
Due to some improvements such as site speed performance and concerns like independence, I need to run this technology locally.
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
I used this tool for this: google-webfonts-helper [»]
My minimum browser support (Modern Browsers) will be IE9+. In this case, when I select that option from the tool, it gives the following #font-face block.
/* nunito-regular - latin-ext_latin_cyrillic */
#font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'),
url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Since the opening speed of the project was our primary goal, some questions were kept in mind.
As you can see, this code tries to load both woff and woff2 fonts.
The thing that comes to my mind is that since I included woff, why should I try to include woff2?
Wouldn't it be enough to include the woff type font set for all modern browsers (IE9+)?
Finally, I learned that IOS operating system based devices use ttf type font. As a matter of fact, when I use only woff, what is my minimum IOS support?
woff2 is the modern "standard font" and is supported on modern browsers. Woff2 is a more compressed font, so the woff2 files are smaller then the woff files. To support modern and some older browsers, both the woff2 and woff files has to be there. The priority is to ask if the font is present on the device, if not then present Woff2, and if woff2 fails, load the woff font.
If you look at the performance, the woff2 is the best choice. The woff is a fallback for older browsers.
Note that not both woff2 and woff are loaded. If woff2 is supported, the browser will only load woff2. On the other hand, if woff2 is not supported, then only the woff is loaded. Presenting both is the best option.
WOFF2 : modern browsers
WOFF : fallback if woff2 is not supported
TTF : Android-browser on Android 4.3 or older
EOT : Internet Explorer 8 or older
SVG : iOS-Safari 3.2-4.1. SVG webfonts are not supported anymore in most browsers
Note that svg files are huge files and bad practice if you're working on performance optimization.
So for best performance, and for very good cross browser presentation, woff2 and woff are enough. Your css looks fine, first check local, then try woff2 and then, if woff2 fails, a fallback to woff.
RE: your comment
To test the performance, I uploaded a Bootstrap page with Font-Awsome and Open-Sans. These webfont files are located in a subfolder on my domain. Each font has this priority:
src: local('Open Sans Italic'),
local('OpenSans-Italic'),
url('../webfonts/OpenSans/OpenSans-Italic.woff2') format('woff2'),
url('../webfonts/OpenSans/OpenSans-Italic.woff') format('woff'),
url('../webfonts/OpenSans/OpenSans-Italic.ttf') format('truetype');
The waterfall diagram shows that from each webfont only the woff2 is loaded. If you do not have to support the old 'Android-browser' on Android 4.3 or older then remove the TTF line from this css example.
All other browsers - FF, Chrome, Safari, Opera and IE9 - works fine.
But in IE8 it wont load the #font-face font - but if you navigate to another page and then return, the font renders/loads fine.
See image:
Top: Text as seen once you navigate to another page, Bottom: as seen when the site first loads
CSS code:
#font-face {
font-family: 'FontNameHere';
src: url('/font/webfont.eot');
src: local('?'), url('/font/webfont.woff') format('woff'),
url('/font/webfont.ttf') format('truetype'),
url('/font/webfont.svg#webfontkKNhbsUZ') format('svg');
}
Thanks in advance.
Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web Open Font Format) font.
Firefox, Chrome, Safari, and Opera support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts).
Chrome, Safari and Opera also support SVG fonts/shapes.
Internet Explorer also supports EOT (Embedded OpenType) fonts.
Note: Internet Explorer 8 and earlier versions, do not support the #font-face rule.
however,
IE8′s relationship with web fonts is a bit more complex than “it doesn’t support it”. It does actually support them, but in a way that makes using them a pain.
There are five types of web font formats:
Embedded Open Type (EOT)
TrueType (TTF)
OpenType (OTF)
Scalable Vector Graphics (SVG)
Web Open Font Format (WOFF)
Of the bunch, WOFF is going to become the standard. It’s supported by Chrome, Firefox (since 3.6), Opera, Safari, and IE9.
Of course IE8 knows nothing about WOFF and instead exclusively supports EOT (to be fair, this is largely because IE8 preceded WOFF). This means that to use a web font which can be displayed in both IE8 and other browsers, you have to supply EOT and WOFF formats.
To make matters worse, IE8 has a bug which prevents it from loading more than one format for the same font. Fortunately, there is a hack you can use.
Anyway, here’s the cross-browser CSS for #font-face
#font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: 300;
font-style: normal;
}
In this example, I’m using a font called Open Sans and its multiple formats (EOT, WOFF, TTF, and SVG) which are stored in the “fonts” folder on my site.
If you’re wondering why I included the SVG format, the answer is because mobile Safari (iPhone/iPad) supported only this format until version 4.1.
I know this is an old question, but it comes up quite high on Google searches so I thought there might be some value in adding an answer here...
I have not yet come to a definitive answer, but I was unable to find others suffering the same symptom you're describing.
Generally, with IE8, webfonts either work or they don't -- but I was having them not load on some page loads (usually but not always the first), and seeing them sporadically not load from page to page on a site I'm working on.
I use a separate development server and this problem only occurs there, not on production!
I haven't yet figured out why this is the case. My first instinct was MIME types for EOT fonts, so I added one on my dev server. That didn't fix it. I haven't had time to fully diagnose, and since production is more important and I'm quite busy I probably won't be able to dig in any further for a bit - but perhaps someone will see this at the top of some google results and it'll be a catalyst for them to figure out the issue...
I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.
According to this article, http://www.standardista.com/css3/font-face-browser-support IE supports #font-face but I couldn't find any site which has valid custom font face working for IE
Also, if IE supports custom font via #font-face from early on (IE6), then why people still using cufon for instance?
Any clarifications or examples?
Older version of Internet Explorer supports Embedded OpenType (EOT) files before #font-face was formalized in CSS3. You can find compatible files on sites like FontSquirrel or Google's Font API. FontSquirrel's conversion tool should also help here. Also worth a read would be the latest bulletproof syntax recommended by fontspring to embedding multiple files for multiple browsers.
The fact that this wasn't used frequently until recently is two-folds; first there are legal issues with using #font-face fonts - copyrights to be specific. Unlike cufon which only retains the shape of the fonts, with #font-face you are transmitting the actual fonts themselves, which has legal implications.
The other problem is support in other browsers - Firefox 3 was the last of the modern browsers to not support #font-face in some way, so before Firefox 3.5's release in mid-2009 #font-face was still not viable. In addition to all that there are differences in format support between the browsers, so the development of the technology is slow.
Internet Explorer 9 requires an EOT type font. TTF fonts can be used in most of the other recent browser versions and SVG for devices like iPhone and iPad. You can read more about browser support for #font-face here http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Font Squirrel is also a great resource for creating web font files including EOT from your existing font files. Please be sure you have a licence to use the fonts on the web. You can access the free web font file generator here:
http://www.fontsquirrel.com/fontface/generator
A typical CSS entry for an #font-face set looks like this:
#font-face
{
font-weight: normal;
font-style: normal;
font-family: 'custom-font';
src: url('/some/directory/custom-font.eot');
src: url('/some/directory/custom-font.eot?#iefix') format('embedded-opentype'),
url('/some/directory/custom-font.woff') format('woff'),
url('/some/directory/custom-font.ttf') format('truetype'),
url('/some/directory/custom-font.svg#webfont') format('svg');
}
Then you can call your font by assigning the "font-family" attribute using css
.my-class { font-family: "custom-font" }
You can also write:
#font-face {
font-family: 'custom-font';
src: url('/some/directory/custom-font.eot');
}
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'custom-font';
src: url('/some/directory/custom-font.woff') format('woff'),
url('/some/directory/custom-font.ttf') format('truetype'),
url('/some/directory/custom-font.svg#webfont') format('svg');
}
Works as well as the example above, without using the "?" mark.
Yes they do starting with IE6*.
A working example.
The font must follow some special rules though, for example the font name must begin with the family name and the family-name in the CSS must match the family name of the font.
If you use the font squirrel webfont generator to generate an .eot from a .ttf, it will ensure the generated .eot is usable on IE6.
* Beware that there are aliasing issues with custom fonts rendering in IE6/7/8.