I'm developing an AIR multitouch app for windows. the whole starling/flash stuff works great. now I tried to load an HTML File inside a window.
the index.html file lays directly in the air root, although the htmlstyle.css.
#font-face { font-family: 'C';
src: url('font/FrutigerLTCom-Condensed.ttf')
}
#font-face { font-family: 'B';
src: url('font/FrutigerLTCom-BoldCn.ttf')
}
ok, in my local browser it looks fine. inside the air app, the text looks frayed and pixeled.
where's the problem? didn't the HTMLLoader find the fonts or are there some security issues?
regards
I once had quality issues with StageWebView. Maybe use StageWebWiew(true) when creating new StageWebView object. This will use device's default browser (e.g. Chrome or FireFox) for rendering html stuff, instead of AIR's built-in engine.
Related
Basically what happens is, that Firefox doesn't load my typefaces when my index.html is not in the root folder.
If I put the same index.html in a sub folder (and relink the href's), everything loads fine but the typefaces. If I upload them to my server, everything works fine. So the problem is just locally.
It's really weird.
This is what I use for my font-face rule:
#font-face {
font-family: pt_sans_condensed;
src: url(../fonts/PTN57F.ttf);
}
(I only have this in firefox)
Mr Lister solved my issue.
Type in firefox's search bar: about:config
And look for: security.fileuri.strict_origin_policy
Set it to false, and Firefox will load fonts across different paths!
This question applies to situations where the web font isn't required on the main page and is initially inside a div set to display:none;
I have a web page that loads a hidden form via Javascript on click and this form uses a web font. My issue is that there is a one second delay when the user clicks to reveal the form, as it is at that moment Chrome downloads the woff2 file.
This isn't very nice for the user experience.
I need to preload the webfont as I have no usage for the font on the main page, so there is nothing to cause Chrome to fetch the woff2 file before the users clicks to reveal the hidden form.
I noticed that this doesn't matter if you're hosting the Font Awesome on your server or using the CDN.
I looked around on the internet to see what could be done, I tried all of the below and none of it helped, nothing caused the woff2 file to load on page load, it only ever loaded when the webpage actively needed the font.
Attempt 1: Preload
<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2">
or
<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2" as="font">
Attempt 2: Prefetch
<link rel="prefetch" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2">
Attempt 3: CSS
#font-face {
font-family: 'Font-Awesome';
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");;
}
As I was looking around I started to see possible solutions with Javascript based loading, something I really didn't want to go near, so what are my options here?
I ended up with this simple solution, it hasn't been tested on anything other than Chrome but it's pretty basic for my use case, I can't imagine it not working on any modern browser.
I decided to force load the woff2 file by loading a font onto my main page, but ensure that the users can't see it.
As I already discovered, Chrome does not fetch resources that are required by any div that is set to display:none;
So here is my solution instead.
CSS
.div-fake-hidden {
width:0px;
height:0px;
overflow:hidden;
}
HTML
<!-- This fake div hidden preloads our web font! -->
<div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div>
Now the browser loads the woff2 resource on page load, so that when my users click a button to reveal the hidden form, the web font loads immediately.
you don't need a hidden div to make your font work. As long as you're using a supported browser (picture from w3schools) the css #font-face rule should work fine.
You can also add more font formats as follows:
#font-face {
font-family: 'Font-Awesome';
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2"),
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff') format('woff'),
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf') format('truetype');
}
You could try using Web Font Loader: https://github.com/typekit/webfontloader
Web Font Loader gives you added control when using linked fonts via #font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit.
My MVC4 website uses a .woff font, which is stored locally within my Visual Studio project (RootFolder/Content/font/myfont.woff).
When I debug locally, it works fine (meaning, I can see the desired font).
I then publish to the remote server, test it and the font isn't doing what it should be doing. I can see the relevant text, but with the 'default' font
I logged onto my remote server, and have verified the files are there!
I know the font I'm using is not installed on the server, but that I don't think matters from what I've read.
My CSS is simply
#font-face {
font-family: corsive;
src: url("font/MT.woff") format('woff');
}
h1,h3 {
font-family: 'corsive';
font-size: 1.2em;
}
If I visit mysite.com/content/font/MT.woff then the browser tries to open it.
My site doesn't use SSL, so it's HTTP only.
The same issue persists in FireFox, Chrome and IE
How can I debug this issue?
IIS has security settings that by default deny access to any file extension that has not been defined in MIME types. As the direct link to the font file doesn't seem to work, but causes a 404, this might be the case.
Normally a .woff file extension has no MIME type set, so check the server configuration.
I'm developing an extension for Google Chrome. I want to use custom fonts in my extension. I have declared a #font-face rule in my stylesheet like this:
#font-face {
font-family: "Anonymous Pro";
src: url("../assets/fonts/Anonymous-Pro/Anonymous-Pro-700.ttf");
}
But, this doesn't seem to work. I get an error like this:
GET chrome-extension://klcdnidgljemjhocdlalimcigcfmlbbk/assets/fonts/Anonymous-Pro/Anonymous-Pro-700.ttf net::ERR_FILE_NOT_FOUND
Do I need to set any permissions in my manifest file to use custom fonts?
Please help.
It's likely that the font doesn't exist in the set location. Recheck your URL
Here is a much detailed answer on Packaging a font with a Google Chrome extension.
I am creating an iBook and I have a widget inside this iBook.
I'd like the widget to use a custom font, hence I've added inside the .WDGT folder a myfont/ folder containing myfont.ttf.
I call it from the widget main.html using CSS, which works perfectly fine when testing on Safari on the desktop. It fails in the iPhone. Am I missing some step? Do I have to somehow tell the iPad via a plist entry to look up in the folder?
Relevant CSS code:
#font-face {
font-family: kheldarfont;
src: url('kheldarfont/kheldarfont.ttf');
}
#scorebox{
font: xx-large "kheldarfont";
}
Any hint?
In a Dashboard Widget, I would use:
In Info.plist
<key>Fonts</key>
<array>
<string>kheldarfont</string>
</array>
But unhappily, according to Apple's support:
Fonts iBooks Author widgets cannot use bundled fonts.