I am using dynamic fonts (font-face) in an HTML page.
I have seen that sometimes, IExplorer users doesn't have have permission to download fonts. This is a choice of security settings.
Is it possible to detect using Javascript if the browser allows font downloads? In this case I could display an alert or I could use an alternative technique as Cufón.
Thanks!!!
This Web Font Loader will attach Events to your html tag.
Works very good for me.
Related
I'm trying to allow the user to view a PDF from a webpage, but disable them to download or print said PDF. I keep running into problems with flash or chromes built in PDF viewer. I've tried Iframe, normal embed, PDF security, adobeJS or w/e it's called but no luck.
Anybody have a universal suggestion on how I can get this to work?
1a. You can not send content to a user that they won't be able to print, or save... The closest you can come, would be to show the equivalent content in Flash, and then they can only print the "visible" portion in the flash viewer.
1b. If it goes over the wire, it can be captured.
What are you using to generate the PDFs? You should be able to do a "write-only" PDF, and YMMV even on that.
After 8+ hours of trying many different approaches to the problem we ended up going with a paid option of Scribd which works in all browsers and looks decent enough for us to use. That is our solution.
When I tried some of the Asian sites (for example http://www.asahi.com/) it displayed the fonts correctly. I did not install those Asian fonts in my PC. Where the browser is getting the fonts from? Is it always dynamically downloads the font from web server ?
How to implement this support in my web server - Should I generate some java script or so?
The fonts are installed on the browsers.
Though, it is possible to define custom fonts thanks to the #font-face technology (entirely in CSS).
Search for #font-face, Cufon fonts etc.
Cufon basically is a font-replacement technique that uses javascript and vector graphics to write fonts from a font file.
I can't find any sign that they specify the font family at all. Certainly the bulk of text is rendered in Times for me, which is the default.
Your default font just includes characters you didn't know it contained.
There are ways to use custom fonts but they aren't using any of them.
When defining the font using css rules, you can add a src attribute specifying a url to fetch the font from a remote location.
Try this link for more info.
Also check out Google Web Fonts, which can provide you with a selection of fonts relatively easily, by adding an appropriate link tag to the header of your page.
Your PC almost certainly does include fonts with many Asian characters. When the web page includes characters that are not supported by the default font (such as Times or Verdana) you're using, browsers will automatically find an alternative font and use that instead, so that you still get readable text.
For Firefox, at least, there's a "fontinfo" add-on you can use to determine what font is actually being used to display any given piece of text - as it may not be the default font, or the font requested by CSS.
Web sites can use various techniques (including libraries like cufon or typeface.js, though CSS #font-face is usually a better option now that it's widely supported) to provide custom fonts for their pages, but this is not necessary in order for Asian text (for example) to be displayed on a typical PC.
I know this is a common issue, but I haven't been able to solve this issue. I'm using Pictos webfont via tumblr as a CDN on this blog http://mrelliotb.tumblr.com/, however, in FF it does not render. I'm looking for a way to make it work and/or a way to detect the failure in rendering as to remove the extraneous letters that should be rendered.
Thanks in advance!
Check the comments on the accepted answer in this thread. It deals specifically with your problem:
CSS #font-face not working with Firefox, but working with Chrome and IE
In a nutshell, Firefox does not like the cross-domain hosting for the fonts, and you should base64 encode them directly in to the stylesheet
You can easily base64 encode your font by using this wizard and selecting advanced/Base64 encode.
http://www.fontsquirrel.com/fontface/generator
from my browser, your font now is helvetics and not pictos web font. did you have some #font-face at your stylesheet? and second, if it is problem with firefox you just have to make sure your config at
option->content-> advance button at font -> make sure your the setting is allow the web render its own font
may this help
Is there some way to preview documents in browser? Specifically in say an iframe within a page, as opposed to opening the doc in a new tab? I have a list of files of any type and when a user clicks on one, want to open it in a readonly format. If that file is a video or audio file, that's easy enough, but I'd like to be able to also do pdfs, word docs, maybe excel. Preferably it would be in a cross browser friendly way but if I need to do detection for a plugin (I've seen Google Docs Viewer for FF) I can live with that.
UPDATE:
ShaneC's answer is great and will work well in general. The one hitch I see is that for html5 devices (think ipad), I need to convert the document into a series of images. Is there any way for me to do this in an automated fashion? I need to be able to do this automatically when a new document is uploaded.
You'll want to integrate a cross-browser cross-type document viewer. Google will give you some good sites, personally I've had good experiences with Flex Paper.
For demos, see here: http://flexpaper.devaldi.com/demo/
There is another approach that can be used to view images/pdf/xlsx/docx etc.
You can use iframe and google's gview in the following way:
const YOUR_URL = https://calibre-ebook.com/downloads/demos/demo.docx;
<iframe
className="doc"
src={`https://docs.google.com/gview?url=${YOUR_URL}&embedded=true`}
/>
There is the Javascript ViewerJs. An open source tool which allows a website to display PDF and open standard for office documents. It will display the documents inline and without browser plugins.
Background:
We are trying to integrate Google Fonts into an interface we are developing; where users will choose a font, and then get a quick preview of the font.
With Google, you need to load in a stylesheet for the fonts... so we would need to change this whenever the user selects a different font.
Question:
Is is possible to load in a stylesheet on the fly with JS and have the changes be visible to users instantly?
Yes... It's very much possible
example can be found here:
http://www.rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx
It is definently possible, as it has been used in the Google Web Fonts Preview extension for Chrome. You might want to have a look at the source code of the extension to see how the author made this work.
First, you'll want to install the extension from the link above into Chrome. Then, you'll need to open a folder, depending on your OS:
XP %UserProfile%\Local Settings\Application Data\Google\Chrome\Profiles\Default\Extensions
Vista and later %UserProfile%\AppData\Google\Chrome\Profiles\Default\Extensions
OS X ~/Library/Application Support/Google/Chrome/Default/Extensions
Linux ~/.config/google-chrome/Default/Extensions
From here, find the identification string for the extension, which is engndlnldodigdjamndkplafgmkkencc. Now you can have a look at the code in the files to get an idea of how you can change the fonts on-the-fly. Just make sure you don't save any changes you make to the file; save them somewhere else on your computer.