We have a site with otf font files.
Everything works fine except how site looks in IE 11.
After investigation we have found a reason:
CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable.
I have checked Installable embedding allowance for otf files on Windows and there is font embeddability is set as Installable.
Also I use tool that makes font file Installable. But the tool breaks otf file.
Any suggestions?
The solution was to use .woff file extension for fonts instead .otf.
First, I have tried to covert .otf file to .woff format using one of free online tools for the conversion. But it broke the license.
So we decided to ask .woff files from the designer.
Related
Due to some concerns with GDPR I want to host all the google fonts myself
For background, I am building a text editor in which the user can pick any google font. The chosen font is then loaded on the fly.
This is not a problem, I downloaded them all from the official Git repository. However, in the zip they only give you ttf files not woff. I have read for max compatibility/performance woff is the preferred choice.
I have found sites like this that let you get individual fonts as woff but I want them all.
Does it really matter if I just use the ttf ? I can load them dynamically using font face api but is that OK cross browser?
If answer to 1 is that I should use woff (or something else), then how can I get the entire Google Fonts library as woff
Unless you want to support IE, it's well supported across all other modern browsers.
TTF/OTF - TrueType and OpenType font support
Having a difficult time trying to get the proper .ttf file from the font family and set-up into my website.
https://freefontsdownload.net/free-futura_bk_bt-font-73014.htm
body {
font-family: Algerian ;
}
can i know what is the font-family for the link i provided ? ( does not wanted to download and save it into my server )
You can directly import fonts that can be found on Google Fonts
with tags without needed to download and serves the font files locally. However, there are also fonts that are not available on Google Fonts. For those fonts, you can only download and serve it locally on server there's no way to escape. Or you may try to search and see is there anyone who have the font files on their server and then directly use theirs', but I can say most probably you wont be able to use as you will be blocked by CORS (Cross-Origin Resource Sharing).
It's actually quite simple to setup fonts. After you downloaded the font files, normally there will be font files (eot, ttf, svg, woff...) and a CSS file, just put the font files somewhere on your server (prefer on root folder named "fonts"). Then open the CSS and edit the source to the directory that you store your font files ealier. url("../fonts/your-font.ttf")
simply go onsite of google font choose font then copy meta tag then use font family.
I've learnt that Google automatically serves TTF, EOT, WOFF, or SVG font files depending on the browser / device it's accessed from.
Now I am planning to host and serve the font files from my server itself, for which I would first have to download all the file formats of the web font(s).
How or where can I download the 4 file formats for a web font that I would like to use?
PS: By using different browsers -- Chrome, IE9 and Safari (dev - iPhone UA), I was able to get the WOFF, EOT and TTF formats. No luck with the SVG format though. It would be awesome if there's an even simpler way.
EDIT: Oh, and by the way, I do know that I can download various formats from online web fonts, but I am talking about downloading from the official repo here.
You can download all the Google Fonts directly from the Github repository (google/fonts), but as you know, only the ttf/otf format. So with those fonts, you can generate a web font kit using Fontprep or with the generator of FontSquirrel.
I hope it will help !
In my CSS I have
#font-face{font-family:"MyFont";
src:url("MyFont.otf")format("opentype");
on my server, I have in the same folder-
Index.html
mystyles.css
MyFont.otf
but it never pulls it through, is there something I should know about otfs ?
Well, from your code, it seems to be missing a ';', but in any case, you can check this tutorial:
How to use CSS #font-face
Or you can check this very helpful site and it's kits and generator
fontsquirrel
Bye
.otfs aren't a good file type to use. No good example of font-face I've seen uses them.
You should also provide .woff and .ttf file-types, .svg files are also seen in font-face stacks.
See if this tool is any help: FontSquirrel font kit generator
I downloaded the Franchise Bold Font. I know how to use it in my code, but where do I put the font files in my webserver root so that they get found and used?
the URL is: http://www.derekweathersbee.com/franchise/
To use a font on a web page it needs to be a WebFont - you can't just put a TTF file onto a webserver.
Font Squirrel offer a service to create/convert WebFonts - there's a fair bit of info on how it works there and a Google for webfonts will bring up a tonne more.
Obviously you need to rights to do convert and use the font - the font you're using appears to be free but if I were you I'd credit the creator/throw them a link somewhere!!