I'm trying to use a downloaded font on MacOS and iOS in Safari. There are many war stories out there about bulletproof CSS and such, but I haven't found the correct incantation. Here's my best effort, and I've tried many variations with different quoting, casing and so on. The font is called AHRDIcons, and it's installed and working on both operating systems. That's all I need---I don't need a web font, I just want something that will work on systems that have the font already available.
#font-face {
font-family: AHRDIcons;
src: local(AHRDIcons);
src: url("AHRDIcons.ttf") format("truetype");
src: url("file:/Library/Fonts/AHRDIcons.ttf") format("truetype");
}
This works on MacOS if the page is loaded locally (as file:///Users/.../cup.html), and this is because of the 3rd src option. It doesn't work on MacOS or iOS if the file is served by http (as http://.../.../cup.html), which I would expect to work using one of the first 2 srcs. But instead there are just little squares.
Conclusion: I don't think this is possible. Maybe there are defaults writes that would permit it, or maybe the whole fingerprint-detection could be turned off, but as I continue to read about this issue here and on other sites, I haven't found anything to lead me along those lines. And not sure I would do them anyway.
I solved the problem by hosting the ttf on the server, and using a src: url("http://.../../AHRDIcons.ttf") clause in the font-face declaration.
Thanks to those who helped!
If the font is already installed on the operating system and your only users are going to be on said operating system, then you don't need to add it with font-face at all.
Double click the ttf in OSX, click the 'info preview mode' icon and check what the font's family is. Then just use that in your CSS:
Here's an example with Apple Symbols:
p {
font-family:"Apple Symbols";
}
Related
So Ive got the Oswald Google font installed and I've noticed that it is not displaying correctly. From another computer that does not have it installed it appears fine. Does anyone know why this is the case? Should this be a concern since probably very few people have this font installed?
It seems that the local font is giving you problems. You can use the Paul Irish smily hack to disable the local font. Disabling it by defining an illegal font name will force the browser to load the web resource.
src: local('☺︎'),
I have been trying to use Helvetica font while creating the pdf but the font is not reflected back in pdf.
I did some google and found some solutions but none are workable.
Tried Solution 1
I found similar thing here :
Font issue
Tried the last solution mentioned over there
workaround is to define #font-face in your css and have src link
to external host that is accessible by wkhtmltopdf
But the solution is not working.
Tried Solution 2
I also tried to use google font api, but result is still not workable.
helvetica font
here is an example
Example of custom font
Tried Solution 3
I tried doing it using css property #page.
But that also is not working.
What is the approach for a workable solution.
The easiest way to fix wkhtmltopdf's font problems is to Base64 encode the font (you can use this tool) and include it in your CSS:
#font-face {
font-family: 'Helvetica';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
This works with all fonts (including Google Fonts), and guarantees cross-platform compatibility across different machines and operating systems.
For me loading fonts from Google Fonts didn't work. And putting base64ed binary into a CSS file seems a little to much for me(Korean types are several megabytes). I'd recommend to install the fonts you need to use on the machine. For Ubuntu you can simply download fonts files from Google Fonts and copy the files in to $HOME/.fonts directory and run fc-cache command in command line to rebuild the fonts list.
$ mkdir ~/.fonts
$ copy your-font-file.ttf ~/.fonts/
$ fc-cache -fv
For a Rails application you can symlink
$ ln -s /your/app/root/assets/fonts ~/.fonts
Then you will be able to list all available fonts.
$ fc-list
Nimbus Sans L:style=Regular Italic
URW Palladio L:style=Roman
Century Schoolbook L:style=Bold Italic
Nimbus Sans L:style=Bold
URW Chancery L:style=Medium Italic
Nimbus Roman No9 L:style=Regular
Century Schoolbook L:style=Bold
Century Schoolbook L:style=Italic
Nimbus Sans L:style=Regular
....
To add to the fray, using wkhtmltopdf 0.12.1 (with patched qt) on linux this worked for me:
#font-face {
font-family: dejaSansMono;
src: url('file:///usr/share/fonts/dejavu/DejaVuSansMono.ttf');
}
I.e., specifying the path to the .ttf. Simply naming a font-family, any font-family, did not work even if it did in the browser.
expanding baxangs answer for linux (x64) users: you install the ttf font file in /usr/share/fonts/font-folder/font-name
and then in your css file use the fontname which is listed in fc-list, you don't need to use #font-face, just use the fontname in your css
example Verdana.ttf======
copy from local machine to server into /usr/share/fonts/Verdana/Verdana.ttf
fc-list to get the fontname (most likely it'll be Verdana)
Then use in your css P{ font-family: 'Verdana'}
and that's it! took me a while to get it fixed.
I had the same problem with PT Sans from google. What worked for me was the following process:
Download PT Sans from google and runt it through fontsquirrel
generator
Place the #font-face (I only used the ttf) in the css (in my case was in html
head of a php file)
Note that I did not use base64 and it worked as expected.
Hope it helps
To convert HTML to PDF by wkhtmltopdf try to avoid woff font face. Use trutype format of the Google Web Fonts with base64 encode.
Recently I tried to use a google web font from Google Web Fonts. But in browser it shows correctly but it doesn't show after converting HTML to PDF.
Then after searching lots of from web at last I found tools to encode fonts to base64 encoded format and also got CSS for #font-face.
I was searching the best-practice to implement a font inside a website and I still didn't found a real answer to this.
On forums and blogs many people say that using #font-face is the best way, other using Typekit or Cufon.
I don't like these 3 options.
Font-face render my fonts grainy.
Typekit is not freeware and do not have all the font that I'd like to use.
Cufon use canvas.
There are other way to implement fonts?
There is a way to render it with no grain?
Screenshots:
Mac
Windows
Font rendering depends on the Operation system, some of the font specific settings in the OS, the browser and the font itself. The better the font is prepared for screen usage (hinting,…) the better it looks. Their is no »do it like this and it is always fine way«, there are too many factors that play a role. In the images above you are trying to render very thin font, this is always problematic, especially if the font is badly hinted and/or set in a small size. The advantage of services like TypeKit and google webfonts are that they provide you with screen optimized fonts, so if you are not familiar with fonts themself you should prefer some prepared fonts, or optimize the font yourself if it is too bad. You should also keep in mind that not every font is suitable for screen usage and i think that can be one reason why google and typekit do not provide all fonts.
good luck…
EDIT:
once I forgot to enable some kind of font rendering option on windows, I think it was somewhere at: leftclick computer > properties > performance, but I am not sure where exactly, I do not use windows anymore to find it, but the start was at »leftclick computer > properties« and it was about the »antialiasing« of fonts. After ticking the box it looked much better. It was a thin font too in this case…
greetings…
What exactly do you mean by 'grainy'? I only ever see that in older versions of internet explorer, and there are CSS properties for font smoothing.
Using TypeKit uses #font-face, it's just loaded in a different way. Have you tried Google's webfonts too?
Here is a great article on the best method to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}
I'm using webfonts for the first time on a website I'm currently making and I noticed that the bounding boxes of the fonts seem to be different on Windows and Linux & Mac (same on Linux & Mac that is). This is not browser dependent as the same versions of Chrome and Firefox on all operating systems have these differences. Basically, on Windows, there is extra space on top of the character, while on Linux and Mac the character's bounding box is much closer to the actual top of the character (and for example umlauts are outside the box). This naturally changes the way positions, margins, etc. behave.
Currently the font is defined like this:
#font-face { font-family: "FranklinGothicHand";
src: url('fonts/franklingothichanddemi-webfont.eot');
src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'),
url('fonts/franklingothichanddemi-webfont.woff') format('woff'),
url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'),
url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg');
}
Because of this, for example, I can't properly vertically align a decorated initial cap of an article to the first line of the article since its position is different on different operating systems.
Can anyone think of any solution for this?
I was looking into this myself the other day and i came upon this site with an explanation of what is going on. http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ The takeaway i got from the article is that the OS's render the fonts differently and the only real fix is apparently to massage the font itself to make them deal with the different OS rendering styles. Unfortunately editing the actual font is probably not an option i am guessing.
Maybe detect the browser with javascript with this plugin (see os.name) http://jquery.thewikies.com/browser/ and then use that to determine which stylesheet you want to load How to load up CSS files using Javascript?
Fonts are really odd between operating systems, it doesn't surprise me that much that the rendering is inconsistent.
I just discovered -webkit-font-smoothing: antialiased; -- it seems to do a good job for Safari and Chrome on OSX.
I've been working on my first HTML5/CSS3 site, and it's been going well for the most part. Totally loving the new #font-face property, and it works perfectly on my machine. The problem I'm having is when previewed on another device (computer, ipad, iphone), it doesn't seem to be recognising the #font-face property and uses the fallback font instead.
Site link: http://williamben.com/
Here's the CSS I'm using:
#font-face { font-family: 'League Gothic';
src: url('_/type/league_gothic.otf') format('otf');
}
Any help would be appreciated.
Thanks in advance.
It is working on your computer as you have the font installed. If you disable the fonts it will not work. It is a common mistake using web fonts as most fonts people use as web fonts they also have installed, so if the web font declaration is wrong, they don't spot it.
It looks like the reason is because you are pointing to a font that doesn't exist, or you have the path wrong. http://williamben.com/_/type/league_gothic.otf doesn't exist.
Agree with dstorey. Also, maybe check out font squirrel to get more coverage:
http://www.fontsquirrel.com/fontface/generator
From the looms of things the file path may be wrong. But youll still want to use the fontsquirrel generator because it will give you a few more lines of code that ensure the font works in near every browser. Then has a fallback to a basic font stack if all else fails.