I've been referencing the findings in this thread and in this question when trying to get a custom font that uses embedded bitmaps to render them via #font-face, and in my experimentation with fonts that I know are configured correctly, I found the following results displaying 日本語 using Windows 10 and Vivaldi (Chrome, etc), with ClearType on and configured (unsure if this matters):
span {
font-family: "SimSun"; // or just omitted, since this is a fallback font
}
#font-face { font-family: "font"; font-weight: normal; src: url('simsun_0.ttc'); }
span {
font-family: "font";
}
simsum_0.ttc is the font that I pulled from C:/Windows/Fonts/ and placed in the folder where the css lives. I've also verified that this file does indeed have embedded bitmaps and is configured correctly.
I've since just installed the font I'm working on and referenced it via its system name, which then loads the bitmaps correctly. Is there any way to get browsers to load the bitmaps from fonts loaded via #font-face? Is there any documentation or spec on this limitation, or possible work-arounds?
More examples
This works the same for custom-built fonts as well - here's an example with an .otf font in Chrome. The font loaded via it's name when installed on the system:
and the same font loaded via #font-face's url:
Chrome and Firefox (and likely others) run OTS on the fonts not available in the system, which removes the EBDT & EBLC tables (where the bitmaps are stored) from the font.
From the OTS readme:
The OpenType Sanitizer (OTS) parses and serializes OpenType files (OTF, TTF) and WOFF and WOFF2 font files, validating them and sanitizing them as it goes.
The C library is integrated into Chromium and Firefox, and also simple command line tools to check files offline in a Terminal.
The CSS font-face property is great for web typography. Having to use images in order to get the correct typeface is a great sadness; one should be able to use vectors.
However, on many platforms the system-level TrueType font renderers have never been part of the attack surface before, and putting them on the front line is a scary proposition... Especially on platforms like Windows, where it's a closed-source blob running with high privilege.
In 2014, there was interest in adding color bitmap tables to Chromium, and support was added to pass-through the color bitmap (CBDT & CBLC) tables to OTS, so it seems possible that support could be added for these as well, if the browser requests it.
The steps I see to make this possible are:
Add the ability to pass-through the EBDT & EBLC tables to OTS. This is the current location of the code that passes the color tables through.
Request that each project (Chromium, Firefox, etc) allow the pass-through.
Wait for all the updated code to be pushed down-stream.
There might be more complicated implementations of this sort of support (options in #font-face, etc), but this seems like the easiest, since the color tables are already supported (somewhat) in the same way.
A reliable and easy option is to use a service like FontSquirrel.
https://www.fontsquirrel.com/tools/webfont-generator
Upload the fonts and it will generate everything you need so you can download, copy and paste into your project.
Good luck!
The problem is #font-face doesn't support TrueType Collections (.ttc) files, so it will fail loading it. Does the console give you errors indicating something like this?
You could use a tool to extracy the needed .ttf from the .ttc file, if the license allows this. Or you could ask the foundry you got the font from to supply you with a .ttf (or .woff2, whatevr you need).
Related
I have a webapp that uses #font-face to display TinyMCE icons. When running the app locally, these icons appear as intended in IE11. However, when deploying to a cloud server, the icons do not appear in IE11. I have edited my #font-face to take the .eot file out of the equation so that all browsers just grab the .woff. Also, on both local and remote versions of my app, the icons load and appear as intended on Chrome, Safari, and Firefox. I have noticed 2 key things:
On local app (which is over HTTP), IE11 GETs the icon file, tinymce.woff, without an issue. Before I changed this to get the .woff rather than the .eot, the .eot worked fine too. However, on the remote version of the app (which is over HTTPS), IE11 GETs the tinymce.eot, the tinymce.woff, and the tinymce.ttf (in that order) and all have a 200 Response Code. Why is IE11 downloading 3 different versions of the icon file? Is it possible there is some kind of conflict between these three files and that's causing the icons to not display? If so, how do I fix this? Keeping in mind that on the local version of the app, IE11 only GETs one of the icon files (tinymce.woff) which I believe is the behavior I want.
Research has led me to believe that the issue may be with the "Pragma" and "Cache-Control" headers that are being sent back as a response to the app's GET requests for the icon file. However, I am having trouble figuring out how to remove these headers for the HTTP Response. My application uses Spring MVC.
My current #font-face configuration:
#font-face{font-family:'tinymce';
src:url('fonts/tinymce.woff') format('woff'),
url('fonts/tinymce.ttf')format('truetype'),
url('fonts/tinymce.svg#tinymce') format('svg');
font-weight:normal;
font-style:normal}
It's hard to guess without being able to look at a demo. But since IE11 downloads an EOT, which isn't present in your #font-face rule, it looks like the CSS you think is being executed is not the CSS the browser uses.
If the #font-face rule is okay (but you copy/pasted the wrong one here), then perhaps the installable bit isn't set on the font. IE11 needs that, but on the other hand, you would expect an icon font to have taken care of this.
It's also possible the mime type isn't set correctly on the fonts served. See this thread for some troubleshooting options.
And, if you find the solution, please post it here so others can learn too! :-)
The solution was indeed getting rid of the "pragma" header. Since my project was a Spring Boot application, I created a header filter in my security configuration class. To create a Spring security configuration class:
1. Create a class that extends org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter.
2. Give the class the following annotations:
-#Configuration (org.springframework.context.annotation.Configuration)
-#EnableWebSecurity (org.springframework.security.config.annotation.web.configuration.EnableWebSecurity)
-#EnableGlobalMethodSecurity(securedEnabled = true, prePostEnabled = true) (org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity)
Within the class, create a method with #Bean annotation. Here is my complete definition:
public HeaderWriter cacheControlHeaderWriter()
{
return new DelegatingRequestMatcherHeaderWriter(
new NegatedRequestMatcher(new RegexRequestMatcher(".+\\.((eot(\\?)?)|(woff2?)|(ttf)|(svg))", "GET")),
new CacheControlHeadersWriter()
);
}
I'm using Open Sans on my site, and I'm noticing from the handy colored dial on Google Web Fonts, that if I want the light, italic, semi bold, bold, and other styles, that it becomes quite a heavy download for the end user.
Is this really a problem with a font as popular as Open Sans? Do browsers download Open Sans all over again every time a website has their own file listed in an #font-face declaration?
Am I incurring expensive HTTP requests, or am I just adding what is missing? So that if a browser already has Open Sans Regular, Italic, and Bold (and bold italic), they're only grabbing Light and Semi Bold from me?
Preemptive Update I've used the local() expression in my #font-face declaration, and it's given me real bad problems with italic styling, it basically ignores it.
Unless you use local(), which you say you have problems with and which is prone to users having different font files than the one you assume they have, font files are just like any other resource (scripts, images, style-sheets).
They will get cached by browsers, depending on user preferences - this meaning they only get downloaded once and used from cache from that point on, until the cache expires or gets cleaned.
If you define a #font-face and specify font files for it, the first format the browser understands from the list of font file formats you list will be downloaded and used. That's why you normally list the lightest formats first and the heaviest last: (woff2 > woff > ttf > svg).
Please note that if you serve the font files from your server browsers will never use the font-files from, let's say Google, even if they are exactly the same. This gives you the option to serve modified font-files. But if you use font-files from Google, users might already have them cached, and they will be used if they had the exact same download link (same weights, same variants).
I am looking at the source code of a project where a licensed font from myfonts.com is used.
The css file contains this -
/* #import must be at top of file, otherwise CSS will not work */
#import url("//hello.myfonts.net/count/123d4d");
#font-face {
font-family: 'SoliPx';
src: url('webfonts/123D4D_1_0.eot');
src: url('webfonts/123D4D_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/123D4D_1_0.woff') format('woff'),url('webfonts/123D4D_1_0.ttf') format('truetype');
}
And as mentioned in the source urls - there are eot, woff, ttf files in the local webfonts folder of project.
I know how #font-face and webfonts work in general.
But in the case above where a licensed/commercial font is used, I don't see any font files downloaded in Dev Tools, but the text is rendered with the specified font.
There is a net request that goes to hello.myfonts.net/count/123d4d with status 200 and response content-type of "text/css" but nothing in the response body.
What is happening internally? How this is working?
I've dealt with this before, and here is what that imported file does:
As far as actually loading the fonts, it does nothing. I've left it out before (while testing) and the fonts load fine from my server.
It counts the number of times the files is imported by your CSS (hence the /count/in the URL). If you read the myfonts.com webfont license, most of the webfonts come with a monthly pageview cap. If you pass that cap myfonts will want to charge your account again, or suggest you purchase a new license with a higher cap.
So what we really have here is an API endpoint that returns an empty CSS file. Every time that CSS file is loaded, myfonts adds a +1 to the number of monthly page views to the account that corresponds with the hash at the end, in your case 123d4d.
Once again, it has nothing to do with loading the fonts themselves. You have the files on your server, and they will load when referenced—full stop.
In CSS why is a backup font recommended if I am uploading a custom font for use with the webpage?
I thought the backup fonts were only needed in case the client doesn't have the 1st/2nd/3rd..etc choice installed.
For example if you have this code:
#font-face {
font-family: MyCustomFont;
src: url('../fonts/MyCustomFont.ttf');
}
Why is this necessary?
body {
font-family: MyCustomFont, Arial, Helvetica, sans-serif;
}
It's not necessary to specify a font stack, but it helps to degrade gracefully in obscure cases when a browser is unable to use the font somehow, e.g. if the HTTP request for the font file times out, the font file itself becomes corrupted or otherwise unusable, the browser doesn't support any of the given font formats, among others.
You should do your best to ensure the custom font gets downloaded and used properly, of course. But things can and do happen that are out of your control sometimes, so it doesn't hurt to still have something nice to fall back to. That's why they're called backup or fallback fonts :)
DaveRandom, these would be the only nested while loops involved in the business of computing.
I figured out a way to integrate Google Fonts without any of the problems usually found when 3rd party fonts are used.
First off, we know our Google Fonts files are in the .woff format and may not work in all browsers.
Second, if a Google Cloud or some other molest prevents the download of the font file from our server due to cache restrictions or other network limits we know this pseudo-state of connectivity will likely support the .woff fonts from Google Fonts.
To the credit of Google we may be able to load our images in some other way so why not try a Google Fonts version of our end product.. so here is why not:
In order to insure the font remains the same when adding Google Fonts I recommend not removing the self-hosted fonts unless a verified plaintiff requests you do so for rights ownership reasons.
Instead of removing self-hosted fonts which are the true key to real cross-browser compatibility, create a same-font entry in CSS that specifies it's font title as 3rd party such as: 'ArialVanityGoogleFonts'.
Use the browser's built-in font fallback .csv and include the fonts as follows: ArialVanity, ArialVanityGoogleFonts, Arial
I have a social network that allows users to choose fonts for their profiles. It works great on Chrome, Safari and Firefox but IE7-9 does not play well.
What should I change in my font php file to echo some nice css? Here is the code:
$fontovi_style='';
foreach(explode(",", str_replace("\n",'',file_get_contents(ROOT.'media/font-list.txt'))) as $k=>$v){
$ime=str_ireplace('.ttf','',$v);
$fontovi_style.='#font-face {font-family:"'.$ime.'";src: url("/media/fonts/'.$v.'")
format("truetype");}'."\n";
}
echo $fontovi_style;
Internet Explorer does not support TTF, it only supports EOT.
Check this link for further explanation.
This is to some extent a duplicate of this question
I'd just like to make an observations though: Generating this list on the fly for every single page slows down page load plus it puts some extra load on your server (ie it's not cacheable, it makes your pages larger, I/O reading the font list every time, etc)
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers and use in your project. now it will work accurately in all browsers