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.
Related
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).
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 have a css font family like below(I have shorten it because of displaying limit otherwise it is much much bigger than what I have present here)
now can you please let me know that if there is a way to convert the url()content inti .ttf font formats or other standard font formatS ?
#font-face{font-family:'web_font';
src:url('data:font/opentype;base64,d09GRk9UVE8AAHUkAA0AAAAAvnQAAhOIAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABMAAAXwMAAIcHbRkIAEZGVE0AAGA0AAAAGgAAABxoptAkR0RFRgAAYFAAAACWAAAA3hpVGOlHUE9TAABg6AAABf8AABkwdgAPiEdTVUIAAGboAAAGngAADSIYX0AXT1MvMgAAbYgAAABXAAAAYI8WBFNjbWFwAABt4AAAAZYAAAKquYd/vWhlYWQAAG94AAAAMwAAADYIcsC0aGhlYQAAb6wAAAAhAAAAJAuVB6xobXR4AABv0AAAA0cAAAaQAUI5cG1heHAAAHMYAAAABgAAAAYBpFAAbmFtZQAAcyAAAAHuAAAFH7QO6sRwb3N0AAB1EAAAABMAAAAg/h4AHnictLoHXFRH1zjMvbC7V9S1cRcFXVDBggTpxRbFrigWpCq997pUkY4w9N5BepMuoGI3WGNsURMTY0wsURITU2Zx8Hm+uQsui/F58/zf9/eBF2fOOXPanDnnzN0lpGRkpAiCmBLq4mjl4uXga+HiKEWQUoTUGuF0qeHTxPAZcvgpQ+');}
1) First of all you need to save the base64 string as a file.
Some of the online service is restricted to how much you can enter, so simple do this locally by just opening the base64 string in your browser and you will be promoted with save as dialog, choose any name you want
Alternative (if the browser don't allow you to enter such a long url) create a download link open the page in any supported browser that supports download attribute (chrome, firefox, opera)
download web_font
2) Then you need to figure out what file extension it's
With just the small amount of base64 string you provided me i was able to recognize it as a woff file, by looking at it with a hex/text editor. I uploaded the saved file to https://hexed.it and could read in the beginning that it said woff
So now you have your web_font.woff file!
3) Convert it to TTF with the right tool for the woff - format
I can google that for you and found for example fontforge that dose this and some free online service as well.
onlinefontconverter.com makes a good job at converting unknown formats by looking at the magic number instead of the file extension so you can have your ttf file directly. And you don't have to install any program either. But it doesn't tell you what the original file extension is.
Don't do this? If you have an actual font file, like a .ttf file, just use that in your CSS.
#font-face {
font-family: WhateverNameYouNeed;
src: url('location/to/your/file.ttf') format('truetype')
}
aaaaaand we're done. For universal acceptance, wrap it as a WOFF and then use that instead of the ttf OpenType font file, so that every modern browser supports it.
NOTE: you can't just blatantly convert your fonts, though. If you do not own the rights to the font, or the font does not come with a license that says derivatives are allowed, you are not allowed to convert this font.
Is there a way to copy (from Firebug for example) the absolute instead of the relative URL of a web font specified within an #font-face rule?
Example:
I'm viewing the main.css file for a site in Firebug and I get this:
#font-face {
font-family: "myfont";
src: url("myfont__-webfont.eot");
}
How would I find the absolute path for this font?
I know that it should be next to the CSS file in this case, but I can't seem to find it.
Firebug's CSS panel currently doesn't offer an option to copy the URL of the webfont yet. So I created an issue, which was copied over to GitHub as issue #7320 asking for this feature.
Though there's another way to reach this:
Switch to the Net panel and enable it
Reload the page via Ctrl+F5 (or ⌘+F5 on Mac OS X, I guess; circumvents the fonts cache)
Click the Fonts filter
Right-click the request for the font and choose Copy Location
Step 1- Go myfont_-webfont.eot
Step 2- Go Font-Face Generator service
Step 3- myfont_-webfont.eot convert to web font.
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