It seems when I try to include a CSS stylesheet that has embedded fonts Flash Builder 4.7 hangs. It usually makes it to 87% or 94%. I have no clue what it could be. Any pointers would help.
Update: I 've removed almost all of the fonts. Now it's getting stuck at 31%.
Update 2: It may have been related to embedding a certain font. I reduced it down to using only two embedded fonts and removed the last one added. It seems to be compiling now.
It was hanging on a specific font. I removed the font and it is building much faster now. I also limited the number of characters by setting the unicode range:
#font-face {
src: url("/assets/fonts/myfont.ttf");
fontFamily: myfont;
embedAsCFF: true;
fontWeight: normal;
fontStyle: normal;
unicodeRange: U+0020-007E;
}
Related
I ask out to the community if anybody has ever had any issues embedding fonts on their website and it being rendered terrible as the outcome? This is the case across all latest browsers not tied to a specific browser...
Tried adding certain css rules to change the fonts weight, style, smoothness etc but doesn't seem to effect the font by any means, any ideas?
You will notice that the letter 'A' is not as it should be but the correct font types are loaded with no issues.
Font can be found here
Screenshots
Embedded font CSS
#font-face {
font-family: 'Linotte Semi Bold';
src: url('/fonts/linotte-semi-bold.eot');
src: url('/fonts/linotte-semi-bold.eot?#iefix') format('embedded-opentype'),
url('/fonts/linotte-semi-bold.woff2') format('woff2'),
url('/fonts/linotte-semi-bold.woff') format('woff'),
url('/fonts/linotte-semi-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
As we speak I've just received confirmation from MyFonts that sometimes fonts are configured slightly different depending on the font used and may need some tweaking to the Hinting settings when downloading a webfont kit.
The following steps fixed the issue regarding the letter 'A' and now displays correctly as expected:
You may want to try downloading a webfont kit configured to use a different Hinting setting.
Simply log into your MyFonts order history at: https://www.myfonts.com/my/orders/kitbuild.html
Select the webfont you would like to use.
Under the 'Hinting' sub-head, select 'Smooth', 'Native', or 'None' (Best was the default). It may take a couple of tries, depending on the font and how it's used.
The custom Webfont Kit Builder will select a CSS script by default. If you would prefer to use JS, simply change this option at the bottom of the page.
Download the new kit and replace the existing webfonts/stylesheet in your server.
Try this, it fixed some of my font appearance in the past, but it's kind of a shot in the dark. That "A" really looks strange, does it look the same if you install the font on your system and use it in photoshop or word or anything else?
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
I have a basic question that probably refers more to design field, but still it is a web programming.
Let say I need to use Palatino-Linotype font in my web application. How do I better embed it in to my web page application?
My known way:
1) Go to font.com and buy all kinds of palatino-linotype: normal, bold, italic, italic-bold. 4 different files.
2) Then I load fonts via fontface style
#font-face {
font-family: "Palatino-Linotype-normal";
src: "..."
}
#font-face {
font-family: "Palatino-Linotype-italic";
src: "..."
}
3) A I have 4 different fonts, in HTML markup I need explicitly set font of the element to make it bold, or italic, or italic-bold (that what I don't like the most).
Question:
1) is that workflow of using custom web fonts?
2) Maybe there is a way to treat this fonts as usual fonts in term of setting only one font on parent element, and for inner set only style="font-style: italic;" if I want them to be italic.
3) question about performance, does web font rendering speed differs from rendering of usual fonts?
The logical way, generally supported by browsers, is to declare each typeface in a separate rule, as in
#font-face {
font-family: foobar;
src: url("foobar-regular.woff");
}
#font-face {
font-family: foobar;
font-style: italic;
src: url("foobar-italic.woff");
}
and then just declare font-family: foobar and use font-style: italic directly or indirectely via <i>, <em>, and other markup that causes default rendering in italic.
I have simplified the code in an obvious way; naturally you should normally make the font available in different formats, as recognized by browsers.
Services like FontSquirrel generate different code, but it is fairly straightforward to fix the code they produce, or write the code from scratch.
I have intentionally used “foobar” and not “Palatino Linotype”, since the latter is not legally available for use as a downloadable font; at least this is what presume until proven otherwise. (There are many sites on the web that distribute or sell fonts illegally.)
Check out Fontsquirrel http://www.fontsquirrel.com/ it helped me to generate fonts and css:s compatible for multiple browsers.
If you only use Palatino Linotype Normal, and then change it to bold in CSS you won't get the same results as Palatino Linotype Bold. The thing here is that the browser rendering will be used to achieve that and it will suck a lot. I mean, for me and probably for you it will look the same - but not for designers :)
Also there are a lot more to one font than normal, bold and italic. There are light, semi light, black and so on. And designers tend to use those a lot.
So in general, for the first and second question: use different font faces for different styles and no way to use different faces for different styles, another font family indication is needed.
As for the 3rd one: performance is an issue with embedded fonts. But mostly not because of rendering, but because the font files are heavy to download. So be sure to cache them and use only those needed. For example http://www.fontsquirrel.com/ in the previous answer actually by default adds too many files that are all downloaded, so make a little research to know about different formats and what you need to embed.
You use Palatino-Linotype font in your web application use web font from google.
https://developers.google.com/webfonts/docs/webfont_loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. The Web Font Loader also lets you use multiple web-font providers. It was co-developed by Google and Type kit.
More inforamtion follow this link to my blog:
http://webtemplatesmonster.blogspot.in/2013/02/how-to-use-font-face.html
#font-face { font-family: 'Awesome Font'; src:
url('awesome-font.eot'); /* IE9 Compat Modes */ src:
url('awesome-font.eot?#iefix') format('embedded-opentype'), /*
IE6-IE8 */
url('awesome-font.woff') format('woff'), /* Modern Browsers */
url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ }
I have a problem with Arial (maybe other fonts too) in Chrome/Chromium.
It looks good when I use font-family: Arial;
But when I include Arial font-file via #font-face it looks different!
Why could it be? What can I do to make them look the same? Where exactly Chrome takes its fonts?
Here is my css
#font-face {
font-family: 'My Arial';
src: url(Arial.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
body {
padding: 20px;
font-size: 16px;
}
body#native {
font-family: Arial;
}
body#fontface {
font-family: 'My Arial';
}
Here is the rendered text:
.
Sorry for my English, it's not my native language.
I use #font-face a lot, and there's always a difference in how different browsers render it. With some fonts it gets really ugly, in your particular case, I'd say difference is insignificant, and everything else just as Sparky672 already commented.
If you absolutely must have pixel-precise identical rendering on all systems, maybe some javascript based solution may help, check this:
https://stackoverflow.com/a/692994/525445
Again, if this was my site on your screenshots, I'd be perfectly happy with how it looks.
It's just the nature of the web that not everyone will see the identical thing, there are different monitors with different color settings, different resolutions, some people zoom in the text etc.
Just to mention the option, you can detect Chrome with JavaScript and then apply some specific CSS to tweak it.
Is the Arial file you're including with #font-face the same exact file from your system or did you get it from somewhere else? There could be difference in the files that's causing the difference. If not, then as #Sparky672 said in his last comment, there's not much you can do, it's just a browser rendering issue.
Also, out of curiosity, why are you including Arial with #font-face, since it's available on virtually every system?
I've flex application and am using arial font family. My problem is, arial fonts are shown up in windows while on Mac, it's been replaced with Times New Roman. (Arial font is there on both systems).
What can be the problem??
If I were you, I would embed the font in your application instead because you never know if the user have the font on his computer. Moreover, when using system fonts, the rendering can be somewhat different between a PC and a Mac
PeZ is exactly correct. You can find information about how to do it here, but I commented because I wanted to reinforce an additional pitfall of embedding fonts.
First, it will make the size of your SWF increase quite a bit, because it creates outlines of every single character in the font set you use. To resolve this, you should limit down what characters are actually embedded - if possible. You can learn more about ranges here.
Also, remember that you need to embed bold and italics as well if you are using them in your application.
In other words, something like this:
#font-face {
src: url("/style/MyriadNormal.ttf") ;
fontFamily: Myriad;
fontWeight: normal;
unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}
#font-face {
src: url("/style/MyriadBold.ttf") ;
fontFamily: Myriad;
fontWeight: bold;
unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}
Remember that every version of a font you embed will increase the SWF size as well - so if you embed a normal, bold, and italic font you triple up the size.
I'm developing a website for someone but they want (insist) that the title be in a non-standard font. (The customer is always right.) I have the TrueType (.ttf) font but how do I bundle this with the website so that it uses it?
I tried putting it in the Images folder and tried to access it with the style sheet:
font-family:URL(Images/Arial_Rounded_MT_Bold.ttf)
But that didn't work. How do I include a non-standard font in a way which will render?
In case it's useful, this is an ASP.NET 2.0 site.
There is currently no standard way to do this. You could use #font-face, but it's not supported in all browsers. As Lance mentioned, this is a great place to find a support reference for the major browsers.
There is an effort to standardize this type of thing. The Web Open Font Format (WOFF) is such an effort. It looks like this may even be adopted by the major browsers in the future. We will have to wait and see.
For now, the best you can do is to reference your font like you normally would, but add a default (standard) font after that.
font-family: "Arial Rounded MT Bold", "Times New Roman", Serif
You have two options:
Create an image instead of using text
Use sifr to convert your text to the .ttf font
You have lots of options, none of them perfect. Smashing Magazine has a great article about rich fonts - most of them involve flash / image replacement.
http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/
Convert your TrueType font into an Embedded OpenType font (it's easy!) so that you have two font files:
Arial_Rounded_MT_Bold.ttf
Arial_Rounded_MT_Bold.eot
Then make your CSS look like this:
#font-face {
font-family: 'Arial Rounded Bold';
src: url('Arial_Rounded_MT_Bold.eot');
}
#font-face {
font-family: 'Arial Rounded Bold';
src: url('Arial_Rounded_MT_Bold.ttf') format('truetype');
}
h1.title {
font-family: 'Arial Rounded Bold', serif;
}
Thanks to Internet Explorer, the EOT specification needs to be first, in a separate #font-face block and without the format attribute. More info here.
Enjoy!
There is a fair amount of activity on the subject of distributing fonts along with websites, but it's generally in the experimental stage, and won't work for the vast majority of browsers in use. In a few years you may be able to do this, but for the moment you would have to use an image or sIFR.