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.
Related
I am able to use all the fonts that are available in google api.
But how to use the fonts like colorpop and aileron which are not in google api.
how to use these fonts while designing in html and css.
The same you use google fonts. The only difference you need to download locally the font.
First you should download the requre font and after you can import that font to your css code
You can download them locally, place them in your project, then
#font-face {
font-family: colorpop;
src: url(colorpop.woff);
}
make sure you get your source path right, thats it, easy huh?
then in your css use that font-family
.myclass {
font-family: colorpop;
}
How do I add octicons as font similar to the way atom did it?
Whilst inspecting the atom codebase I discovered that they are using the octicon icon set as font (font-family: 'Octicons Regular' & content: "\f0a4"). How would I implement the set in such a way to my own project? Is there a public release?
The following picture is a screenshot of the atom src showing the styles. (Ctrl+Shift+I)
There are no available CDNs for Octicons Regular so you have to get your own WebFontkit. Then you have to add the fonts using #font-face parameter.
Follow the below steps to add custom fonts to your HTML:-
1. Download the Octicons font:- The Octicons Regular fonts are available in this link. Download the TrueType Font file format (.ttf).
2. Create a WebFont Kit:- Upload the downloaded (.ttf) file to WebFontkit Generator.. Then download the optimal WebFontkit.
3. Extract and Upload the font files to your hosted site:- Edit the stylesheet.css file to update the url. For instance if you have url like, www.example.com. So your .css file after update woluld look like:-
#font-face {
font-family: "Octicons";
src: url("https://example.com/css/fonts/Octicons.woff") format("woff"),
url("https://example.com/css/fonts/Octicons.woff2") format("woff2")
}
4. Use Octicons font in your CSS declarations:- As you have added css fonts to your site you can use this in your CSS declarations. For e.g,
p {
font-family: Octicons;
font-weight:normal;
font-style:normal;
}
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.
I'm hosting a pre-made theme on GitHub pages and generated with Jekyll. The theme works properly in localhost, but the fonts do not display correctly on the actual site hosted on GitHub.
Following the suggestion on this post I've changed the #import line in the style.css file to the following:
#import url("//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic");
Which, for the user in the aforementioned post, seemed to have solved the problem but for my page the wrong font is still used. Thanks in advance for any help.
HTTPS request or external link could be block from Github
But, you can download fonts from Google Font website (on the right) :
After you should be able to upload fonts to Github and easily call your font from your CSS (same folder)
#font-face {
font-family: "My Font";
font-weight: bold;
src: url('myfont.ttf');
}
(or url(github.com/link/to/myfont.ttf))
This link will show you how to properly import custom font in Github Pages :
Adding custom fonts to GitHub pages
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.