This is the first time I've used #font-face. The font pack is from myfonts.com and I'm currently testing in Safari and noticed through the web inspector that the css file, which loads the 2 fonts shows as a nearly-2mb-download ! the fonts appear to be there as base64 encoded. The pack didn't include the actual .otf files.
I've added Gzipping via a .htaccess file and this has cut down the size of that file by nearly half but at 1mb, it's still not acceptable and I can't understand why it's so big.
Base64 is larger than the original file around 1.3 - from wikipedia. You can convert the file back to its original state with this convertor, but there are a lot of tool on the net.
Either download the font files through myfonts.com ( http://new.myfonts.com/fonts/typodermic/great-escape-rg/ )
or use font-squirrel generator to make them from the original files if you have previously purchased them
( http://www.fontsquirrel.com/fontface/generator )
Related
My goal was to design a simple website, with a custom font (that isn't available on Google Fonts). I used FontSquirrel's generator for webfonts as a supplement to manually-linked fonts. What was expected was for the src for the WOFF and WOFF2 files to be just simple links to the files. What happened was the generator added this garbage data (which was taken on pastebin as spam and would probably be taken as spam here as well) for every WOFF and WOFF2 file. This threw me off.
As I already stated, I manually linked the files and it did not work, however this may be just a side effect of me not knowing how webfonts work. I tried to look up about this on the internet and found irrelevant results.
I used FontSquirrel to generate the files, and these are the settings I used. The extra font filetypes are for debugging this problem (it only happens to WOFF as I found out).
Am I truly not linking WOFF files properly? Is WOFF supposed to be linked like this? Is the generator supposed to insert garbage data into the WOFF srcs?
edit 1: I only figured out now (after someone pointed it out) that this "garbage data" may just be simply raw font data. I still don't know, however, why this happens, if this is a bug and I can just use the simple src attribute pointing to the file, or is this intentional?
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).
When downloading the css resource for a Google webfont, the result seems to be dependent on the browser.
When I open this URL with my browser (Firefox or Chrome):
https://fonts.googleapis.com/css?family=Roboto
I get this result which contains several woff2 font sources for different unicode character ranges.
When downloading the same CSS resouce URL with CURL for example, I get this result containing just one .ttf font, which appears to contain only a default unicode character range.
So apparently Google looks at the agent string from the HTTP request and then adjusts the result accordingly.
Is there a way to get a .ttf with the full unicode character range, i.e. everything that is also included with the "multi woff2" version? Most importantly the Latin and Latin-Extended characters.
I can convert woff2 fonts to ttf. However I don't know how to combine or merge multiple woff2 fonts into one ttf, or into one woff2 and then convert that.
Or am I doing something wrong and should I use a different approach altogether?
If you pick the font on the Google Fonts site, it'll show a dialog with the CSS code to use as webfont. Google will indeed send a specific version to your visitor's browser, depending on what it supports.
If you want the "full" fonts, grab the desktop version as .ttf file by clicking the download button. It'll have all the OpenType features and un-subsetted character set support.
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.