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.
Related
I have seen a couple of projects where they just mention the name of the fonts they want to use in the CSS file without any mention of the source or the TTF or other font files.
eg
code {
font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}
When I remove those fonts via CSS in inspect element I can see the fonts are changed. So the code works. But I don't understand how the browser figures from where the fonts should be downloaded.
The code works even in incognito so not sure if the browser caching the font is a valid explanation.
Notice that the last setting in the font-family list is sans-serif.
If the local system has absolutely none of the other fonts loaded locally then the system will use whatever it has set as its default sans-serif font.
That is why it looks as though 'it works' when you say this:
#Fabrizio Calderan loves trees I checked the system fonts with this css-tricks.com/snippets/css/system-font-stack link. But the mentioned font family is not matching any of the fonts in the system fonts. So the default font should be picked right?
You are right, it picks the default font, but the version that is sans-serif.
As you can see in the above picture,I created a sample.html file and used the font-family for the body tag. So the source provided does not mention in font-family section. in the result, fonts will load from "Fonts" folder in my windows folder. (Of course if you use Windows OS and website locally, mentioned process will be happen!)
There are several ways the browser decides what fonts are downloaded/used:
As user 'Fabrizio Calderan loves trees' stated (paraphrased):
If no sources are provided, they are loaded from the computer running the webpage in a browser.
The programmer uses external APIs or links that embed a font. An example of this is Google Fonts, which lets programmers choose fonts they want (and select them), and embed them using either a <link> tag (put into HTML code) or #import tag (put into CSS file).
The website you are looking at may contain #font-face statements in their CSS, which links a common name (i.e., 'Source Code Pro') to a font file. You can read more about #font-face here and here.
If you can't find evidence of any of these, could you possibly share a link to the webpage's source code?
EDIT
I took a look at the code in the website. It seems like the fonts styling in the display/textarea is:
.displayArea{
font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}
And, there doesn't appear to be a source of these fonts, so it is part of the 1st category I listed above. Basically, the fonts in quotes are fonts that may be used if already preinstalled inside the client's computer, if not, the browser goes down the list and keeps checking whether the client has the font installed. The ending font is sans-serif, which is a default font that all computers have, so it serves as a backup in case all other fonts aren't available.
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 have one font(VinylRegular). This font has extensions (like .ttf, .otf) of PostScript Type 1 outline font. How do I embed such fonts into a Flex application?
There are several ways to embed fonts, all of them are explained here: http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_04.html
My Flex web page is using an embedded .otf font in the main css file:
#font-face {
src:url("../assets/fonts/TradeGothic.otf");
fontFamily: myTradeGothic;
}
I develop using Snow Leopard and the font appears fine in Safari, Firefox, and Chrome. When I view the page on a Windows machine, the font does not appear to be working in either IE or Firefox, but has defaulted to a different font which throws off all the spacing. Any ideas why?
The first thing you should do when you're testing fonts is uninstall them from your system and make sure they render correctly. Chances are they're only rendering correctly on your mac because the font is installed in your syste,.
That being said... As far as i know you cant load a regular font file at runtime and have it work. You need to compile the font into a swf and load that swf at runtime into your app to access the font. That's also the way sifr ( http://www.mikeindustries.com/blog/sifr ) works.