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.
Related
May I know why Fonts are rendering differently in Mac OS browsers although, it renders correctly in Windows Browser?
I search for it but I didn't get any solution.
It will depend on the fonts available on the individual computer. If you specify Times New Roman and the OS doesn't have that font the browser must fall back to a standard serif font.
You can include a google font by linking to it in the head to allow the browser to download and display the font type.
See http://learn.shayhowe.com/html-css/working-with-typography/ and https://designshack.net/articles/css/a-beginners-guide-to-using-google-web-fonts/ for more information
I am seeing an issue with a site I am developing where the content regions of the page are showing random artifacts with font rendering. The pages are using Google Font 'Source Sans Pro' and there are no additional tags other that p-tags in the screenshot below. It looks like it is using the fallback sans-serif on parts of the page and the appropriate font in others.
I've also noticed if I toggle the font-family CSS attribute in the console on and off it remedies the appearance... Additionally if I refresh the page (instead of using the on-site navigation) it also seems to render properly. I've not been able to replicate this on another machine with the latest version of Chrome, but it is consistent across my development and test environments. The only extensions I am using are Disconnect, AdBlock, PageSpeed Insights, an RSS reader, and Javascript Quickswithcer... All other browsers appear to behave as expected.
CSS used:
body,*{font-family: 'Source Sans Pro',sans-serif}
Any ideas as to why the latest version of Chrome for Windows may be getting presented this way?
I believe I came across a similar issue. I was able to fix it by overriding the CSS text-rendering: optimizeLegibility set on the body tag by a CSS framework I was using like so:
body { text-rendering: auto; }
Note: In the interest of trying to track the bug down, my version of Chrome is 48.0.2564.116 (64-bit) on OSX El Capitan. A coworker told me about the issue and I had to switch to incognito mode before I started seeing the issue.
Does any one know why some of my font families won't render on some mobile devices? Here's a page that demonstrates the fonts:
http://jl.evermight.com/font/
The fonts render properly on desktop chrome browser, ipad and iphone.
But when i view that page on my galaxy note, the Have A Nice Day font renders as something that looks like arial. On my friends nexus 4, Have a nice day works fine, but the universe condense renders as something that looks like arial.
Does anyone know why?
I've attached screenshot of what the fonts should look like
Additional notes
some people claim Have a nice day is not working in Firefox or IE10. For me, the font works on Firefox. I don't have IE10, so unable to verify.
How do I make this font work on my android?
Additional Notes
I had a typing mistake in my link path to my css files. I've corrected it now. But the problem still appears in my droid browser.
Just tried out the link on my phone - HTC 8s, everything seemed to work fine. Below is the screenshot for the same.
ON HTC 8S
ON IE 10
It's possible it's a downloading issue. The fonts listed in your declaration should work across most browsers (just make sure you're not in Opera Mini, it doesn't really support much of anything).
Additionally, Have a Nice Day is loaded through #font-face declarations in the CSS file, but the others appear to be loaded from the JavaScript, which might be part of the issue. Droid Sans is on Android phones by default, so they're likely just pulling them locally, which is why they work across the board on Android. From there, it might be a difference of JavaScript support (if Universe doesn't work, JS isn't turned on, for example).
Another thing that might help is opening up developer tools in a desktop browser that isn't working (in the case of Firefox, you'll want to pick up the Firebug extension). Check the "Net" or "Network" tab and see if your font files are getting downloaded.
If that still doesn't work, try playing around with the order of the font files in the declaration. I've seen browsers take issue with the order.
Also, the Droid Serif fonts are available from Google Web Fonts, which works cross browser with little headache. It might be worth seeing if your other fonts (or something close) are there, too, and just use Google's Web Font Loader to load your fonts.
The problem has been fixed. Apparently there was a bug on myfonts.com that corrupted my font files. I contacted myfonts.com and they corrected the issue right away. Then re-sent me the font files. Now everything works perfectly.
The guys at myfonts.com are amazing. Very good customer + tech support services.
Below is a link to how I do my #fontfaces for cross browser compatibility.
Cross Browser Fontface
I am trying to use the CSS font face property. I've made it chance the font to the right one, however it looks very edgy on the Windows platform. Especially Chrome looks awful.
When using OSX all browsers are just perfect.
How can I avoid these awful looking fonts?
On OSX Chrome:
On Windows Chrome:
The Segoe font is already installed on most Windows PC's. This can cause problems when you are also trying to link it with CSS. Try renaming the font in your CSS so that it has a different name than the built-in Windows font.
Also, Chrome just doesn't render TTF/WOFF fonts very well. You can get around that by prioritizing the SVG font (by putting it higher up in the font list). This will make Chrome select the SVG font (but most other browsers will still use the WOFF font). See here for more information.
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.