I have a font face loaded for KF8 and it shows up perfectly on the desktop previewer and on my physical Kindle Fire. However, when I load it onto the KDP online previewer, it ignores the font entirely and resorts to the default font settings.
Has this happened to anyone? Are there "safe" KF8 fonts that you've been able to render on the online previewer? Tangerine is a Google web font, only available as a ttf, but I've converted it to an otf and woff, and tried it as such but to no avail. I need a script font for this book of poetry.
Would there be a media query to target the online previewer?
Also, will wrong font (default Kindle font) on the online previewer be what is shown on the Look Inside preview?
My CSS:
#font-face {
font-family: "Tangerine_Bold.ttf";
src: url("Tangerine_Bold.ttf");
}
More CSS in a amzn-kf8 media query:
.section {
font-size: 2.3em;
font-family: "Tangerine_Bold.ttf", serif;
}
OPF:
<item id="font2" href="Tangerine_Bold.ttf" media-type="application/x-font-ttf"/>
I've also tried it as font/ttf and that worked fine, too.
The font looks superb on the actual Kindle. Please help! Amy
The Kindle Previewers, either on-line or stand-alone app, are not guaranteed to be a completely faithful replica of what happens on every device. I have the same problem, actually, with the Nook web previewer (which is also what people use to view samples of a book before buying); it doesn't display data URI-based images (showing a little broken GIF icon instead). In any case, why are you concerned that the KDP previewer is not showing your font?
Related
I made a custom font for a set of icons using Inkscape and used the Free Online Font Converter and Font Squirrel to generate the different font types (woff, eot, ttf, svg) and the #font-face code for inclusion.
The font works fine in Google Chrome with the ttf, svg and woff-font and in Internet Explorer 7 and 8, but in FireFox 13 and IE9 certain icons do not get rendered. The other icons of the font do work correctly, so there is no problem with the file getting delivered. Also because the fonts work in Chrome, the conversion seems to have succeeded.
I think the problem has something to do with the type or shape of the icons I'm using, but I can't find anything in particular that differentiates these two icons from the others I have used.
The problem can be reproduced in my ASP.NET project, but also locally using the testfiles which Font Squirrel supplies.
Update: Still did not figure out the solution, but I found out that when the same TTF-font is installed in Windows, it does work in Firefox. But when it is referenced through #font-face, it does not.
Going to guess it has something to do with the fact that either your fonts or your font's CSS is not being called from the same domain. Both Firefox and IE9 enforce a Same-Domain Origin Restriction. Therefore do not use domains in your link tags or your CSS font-face code.
I'm extremely new to Media Queries so I was playing with the min-width: attributes with my Firefox 12.0 and noticed that it just wasn't working. After some playing around and after experimenting with this lovely website
http://barrow.io/lab/media-query-viewport/
I found out that the minimum min-width that my Firefox supports on my machine (it's an XP box) is 615px. Why? I'm trying to play with Media Queries so that I can make a website that works well on many devices as well as desktops. This includes devices that are 480 and 320 pixels wide. With Firefox not allowing me to test the smaller widths it's going to seriously affect my development.
Is there any kind of a work-around for this other than trying a different browser?
Thanks.
EDIT: Now that my Firefox has gone through a few upgrades (now at v22) this is not longer a problem. I'm glad it got fixed.
As of this: http://support.mozilla.org/en-US/questions/772847#answer-125895,
Firefox supports no more than 480 width, so if you want to test for 320 px, you must use a different browser. I would point out that if you want to test smartphones on your site, you should be using smartphone browsers on smartphone hardware... not just desktop browsers set to really small resolutions, which is what it sounds like you were trying to do.
There's a simple workaround: load the site in an iframe of your desired width.
Oh, and as for why, the behavior you observe is due to the Firefox user interface not shrinking down below a certain width for some reason. Often due to extensions mucking with the UI.
Use the Web Developer toolbar extension and you can see a selection of common screen sizes by selecting Resize > View Responsive Layouts
Here is the simple solution
install chromEditPlus Plugin from here http://webdesigns.ms11.net/chromeditp.html
And then Goto Tool-> ChromEdit Plus-> ChromEdit
select userChrome.css pannel
copy and pate below code Save then restart
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#main-window:not([chromehidden~="toolbar"]) {
min-width: 200px !important;
}
Thus solved the Problem this made your windows minimun to 200px
Thanks
for some reason, in IB, when I make a UILabel, only a few fonts work: Helvetica, Times New Roman, Arial, etc. When I choose a different font, it works when I type the text in, but when I press enter, the font changes to Times New Roman. It still says the font is the font I chose in the sidebar, but it is just Times New Roman. Is there some setting I have wrong, or is it just IB not working?
FYI: this is in Xcode 4.0.2.
iOS doesn't support all the fonts that are available on your Mac and visible in Xcode. You can include your own fonts in your app if you want (and if you have an appropriate distribution license for the font), but it's often easier to stick with the available fonts. See this SO question for a link to the list of fonts built into iOS.
You can always use custom fonts you include in your project, and set it at run time.
When creating a shortcut to a website on Windows Phone 7, the icon it creates is a snapshot of the website instead of any sort of icon that I want it to display. For example, with iOS I can sepcify
<link rel="apple-touch-icon" href="Logo.ico" />
and it uses that icon for the home screen image.
I've tried
<link rel="shortcut icon" href="Logo.ico" />
which seems to work in IE but not IE mobile.
Has anyone successfully created a home screen icon for windows phone 7 / IE7 mobile?
I assume you are referring to pinning a web page to the start screen.
This is by design. You cannot change it.
I think the intention is that you can see a better idea of where you will be taken to when tapping it. This is particularly true if you pins multiple pages from the same site (which would have the same icon otherwise).
If it was possible to set a custom icon, it would need to be 173x173 pixels which wouldn't be the same as any other platform. There would therefore be A LOT of sites/pages which didn't have this specified. If the fallback was to use the default favicon image this is typically only 16x16 (or 32x32) pixels and so would not look good on the 173x173 pixel tile.
All you need is a .css file, a 256x256 image.
.logo {
display:none;
}
#media screen and (max-width: 480px) {
.logo {
display:block;
text-align:center;
width:auto;
padding-top:32px !important;
padding-bottom:32px !important;
}
}
And right before the first html output make a div with logo class and your 256x256 image.
tested on Nokia Lumia 800
Even tough Matt Lacey is right, there is a way you can do this.
It is not a very good way, but Google and others are using it.
Create a HTML-Page that has nothing on it except your tile-icon. This page redirects to your actual website.
Now of course everyone has to pin the HTML-page to the start. You can tell your visitors to pin the HTML-page with a button or something similar.
OR
Create an overlay with JavaScript for your website for every windows phone user that wants to pin your website to the start (determined by a button "pin to start" on your website).
More information on that one:
http://www.russellbeattie.com/blog/creating-a-pinnable-windows-phone-7-tile-for-your-website-like-google
I'm also searching for a better way to create a tile for my blog in WP8 right now but apparently there is no straightfoward way.
I am hoping some of you css wizards might have run into the problem I'm about to describe.
I've created css3 buttons for a clients website, in order to replace their current image buttons. The buttons happen to be a light font face on a dark value background (white text on a red background).
On OSX and iOS, the quartz rendering engine kind of freaks out about this, and anti-aliases the font to death. Bold become really really really bold.
The strange thing is, I develop on a Mac, and cannot replicate the rendering problem the client is having across multiple devices. I've made sure I only have system fonts enabled, that my font smoothing is set the same, etc...
I found an article that suggested a fix for webkit based browsers here, and have seperated the text from it's background in order to give just the text an opacity value.
Still, no dice. Anyone have idea what could be the problem here?
Sample image:
I've encountered bolding issues with web fonts on webkit based browsers. I used the following CSS property to remedy it:
-webkit-font-smoothing: antialiased;
Seems like a better solution than messing with opacity to fix font weights... which really just feels like a hack.