Am using font face method for my website.For that am using TTF file.The problem am facing is due to the size of TTF file the site loading slowly.So suggest me how to reduce the size of TTF file.Thanks.
You could look into the amount of glyphs you are using in the font and try to reduce it to the absolute necessary ones, the Font Squirrel kit generator, when in Expert Mode, lets you select the symbols you want to use.
Read more at Limit characterset of a Webfont?
Related
I'm using noori nastaleeq font in my website but the .ttf file is around a 7mb file which is taking too much time to load the webpage, is there any way to compress the filesize? this font is not available on google fonts too.
P.S: The actual .ttf was around 12mb i'm using w3 super cache plugin so it compress the current file to 7mb and i wanted to compress more
Thanks
Try using font-squirrel to convert your font. They have perfect instructions on their website. After you convert your font, it also comes with a css file that includes your font already added to a font-family. Easy to just plug into your html.
https://www.fontsquirrel.com/tools/webfont-generator
Converting your font file (.ttf extension) to .woff or .woff2
the woff extension is more compacted in comparison of .ttf
Note: consider that IE11 didn't accept woff2 so use woff as it fallback.
I would like to use the Eurostyle font in my Rails application. We got it a while ago and installed in on our Mac computers. The font shows up in all our applications.
This will be my first time using the #font-face CSS statement in my stylesheet. I could not find any examples using a font suitcase. I have found a few solutions on how to split the font. So far the one I found has not worked. The link below suggested using DFontSplitter but when I did I got an error which is listed below. I have no idea what this is.
Want to embed a font but cannot convert from Font Suitcase or PostScript Type 1 files
The error message is: ‘Can't find an appropriate resource fork in /Users/xxxxxxx/Desktop/Exported Fonts/Eurostile/Eurostile
The only other solution I saw was very complicated and was for Mac OS 9.
Has anyone successfully used a font suitcase with the #font-face statement? If not how do I convert this to ttf or some other font format that works on popular browsers?
Short answer: you can't. #font-face is for loading individual font files, not suitcases/fontbooks/opentype collections/etc.
Long answer: there is no long answer, the short answer is all there is to it.
Convert the individual fonts you need to an opentype format, or ideally an opentype format that's been wrapped by a WOFF (WOFF v1 has massive support, WOFF v2 not yet, it's too new), and point to those with your (possibly multiple due to multiple font styles and weights) #font-face rules.
I was able to find a solution to convert my font suitcase to TTF using the solution from this link below.
http://macthoughts.net/20131112-373
After converting my suitcase file I copied the TTF files into my Rails application. I changed the src value in my stylesheet to point to the font files in my application. Now people who do not have the font installed will see the font I want in my Rails application.
I was able to get ttf files from font suitcase files this way:
I opened the Font Book app on my mac (osx 10.13.2), and located the font (make sure it's installed). Select the font and click file - export fonts and select a location.
The result in my case was a ttc file. I could convert this file easily with an online converter like this one.
Where does the web page search for font's specified in the CSS. Does it look in more than one place? Can it look in the same directory as the external css or nested css/html file on a server, or only on the clients computer? What is the steps or order of events?
If there is a #font-face declaration for a given font, and the browser understands it, it'll parse it and download the font from the URL(s) specified. Otherwise (or if the first location to look in is local()), the browser checks the computer's database of installed fonts, and if it's installed it uses the font for rendering.
If the font still can't be found, and there are other fonts in the font stack (a list of fonts as defined in font-family), this will be repeated for each font in the stack until a font is found that can be used. The last fallback font will be the browser's default and/or an inherited font.
You can use fonts on the client's computer or font's on the server accessed with CSS font embedding.
I need to use multiple fonts in my Flex 4 application, so I compile them into swf and load at runtime. I have single .ttf file for each font. When I dont load font's swf file at runtime, flex uses copy of this font installed on my system, and it works fine - I can switch between regular, bold and italic faces of the font correctly.
However, when I load fonts from swfs, setting their style to bold or italic makes no effect. I tried different ways of compiling swfs (css using mxmlc compiler, fontswf utility, .as files with [embed] tags), but nothing worked. When compiling using css it sometimes throw errors that font face is not supported, and it seems that some fonts are available only in bold-italic style only or bold style only.
I use cff fonts, load them using etcs.ru.utils.FontLoader utility. Fonts are loaded correctly, I check this with Font.enumerate fonts.
So is there any way to embed these .ttf files with all styles available?
Here is example how to embed the same font with different font faces.
What about the difference between system and embed fonts, system fonts can differ on different computers of different OS and finally can be absent on a user computer. But embed fonts will display the same way in any configuration.
Can fonts be compressed someway before using as webfonts? I have a font file which is 150kB. Is it possible to compress it down.
And also if i call for both font .eot and .ttf will both be downloaded by browsers?
If you use the FontSquirrel #font-face kit generator - http://www.fontsquirrel.com/fontface/generator - and choose the expert setting, you can manipulate the settings to achieve a little better compression.
You can compress .woff font files with https://github.com/hn/woff-compress. It uses zlib's Z_BEST_COMPRESSION flag or Zopfli to losslessly shrink files down to a minimum.
If you want to lossy reduce files even more, you can remove unneeded glyphs from the font as discussed in Way to reduce size of .ttf fonts?.