I want to use a custom font in the header of the pdf file.
Using the font name only works properly on systems where that font exists
Accepts the text inside the body of the font using the following code, but does not work for headers
I do not want to use Google fonts and I want to use my own custom fonts
##font-face {
font-family: 'hpf';
font-style: normal;
font-weight: normal;
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAPAIAA...) format("truetype");
}
* {
font-family: 'hpf' !important;
}
I accomplished this using woff, woff2 and ttf files, but haven't tested it with base64. However, if you can't make it work with base64 format, you can choose to convert to the other formats. If this is the case, you could make use of https://onlinefontconverter.com (please, check this link), or any other conveter you prefer.
Here is a sample HTML file I have tested in my project (to clarify, I just changed the font name I used to MyFont):
<!DOCTYPE html>
<head>
<style>
#font-face { font-family: 'MyFont'; src: url('../../../Content/fonts/MyFont.woff2') format('woff2'),
url('../../../Content/fonts/MyFont.woff') format('woff'),
url('../../../Content/fonts/MyFont.ttf') format('truetype') }
.custom-font-text {
font-family: 'MyFont' !important;
}
</style>
</head>
<div>
Normal text <div class="custom-font-text">Text with custom font</div>
</div>
Please, also pay attention to the URLs, as they're crucial to make this approach work. In my case, font files are stored inside a folder called fonts, which is inside a folder called Content, in project's root folder (/Content/fonts). The final So I have to use "../" each time I want to go backwards from my /Views/Documents/PDF folder, where the header is placed.
EDIT (Base64 testing):
Tested successfully using base64. Here is my code:
#font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAOA...) format('truetype');
}
.custom-font-text {
font-family: 'MyFont' !important;
}
As far as I can see, the only difference with yours is that I'm using simple quotes on format("truetype"), but seems to have no real impact, as it also works with double quotes.
As your problem might be on the base64 encoded data, I would recommend you to generate the base64 using a tool like this:
https://www.fontsquirrel.com/tools/webfont-generator
Checking these options: ttf (as FontFormats), Keep existing (as TrueType Hinting) and Base64 Encode (as CSS) will generate a complete kit to test your font. For your information, please, have in mind that this tool requires to accept an agreeement clause which states that your font is legally eligible for web embedding.
Check this post to read a complete walkthrough to properly generate the kit and more useful info:
https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html
i would like to use two google fonts, but my fear is that adding in this way:
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
could be slower (in performance) than download fonts in collection...
So i download two fonts in collection, but i have doubt how i could to implement in my website...
Maybe i just have to insert the two collections in the css folder and than add in head
<link href='https://path/css/font/ ???????' rel='stylesheet' type='text/css'>
but i don't know what file i have to link in path... For example when i download PT Sans in collection, in this folder i have these files:
I hope you can help me understand more..
Thanks a lot and sorry for my english
Simply call your fonts in css file.
#font-face {
font-family: myFirstFont;
src: url(font1.woff); /* specify the path of your font location*/
}
Repeat this for next fonts.
#font-face {
font-family: myFirstFont;
src: url(font2.woff); /* specify the path of your font location*/
}
You do need even more font files.
If you just open the file from the Google Server...
https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic
... you see how it is done.
You link the font files from the CSS file - not from the link element.
Assuming that you want your fonts loaded locally from in internal folder than an external source:
Add the folliowing to your code in a <style> tag:
#font-face {
font-family: 'PT_Sans';
font-style: Regular;
src: url('../fonts/PT_Sans-Web-Bold.ttf'); /* IE9 Compat Modes */
src: local('PT Sans'), local('PT_Sans'),
url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype')
}
Or you can reference it externally in a CSS file.
URL is http://arethebaronsplaying.com/
If someone can solve this for me I'll deliver something worth their while...seriously.
I cannot get my fonts to render in IE 10 or 11 in my rails app. I get the following error in IE:
"CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable."
I don't care about earlier than 10. I've tried everything people have already suggested.
I've used the font squirrel font generator, I've added a `.htaccess' file to my root with the following inside of it:
Header set Access-Control-Allow-Origin "*"
I've added a meta tag to my <head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
I'm stuck. Here's my css:
#font-face {
font-family: 'hamilton20';
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-720-webfont.eot');
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-720-webfont.eot?#iefix') format('embedded-opentype'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-720-webfont.woff') format('woff'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-720-webfont.ttf') format('truetype'),
asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-720-webfont.svg#MonoSocialIconsFont') format('svg');
src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-720-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Scotch, anyone?
I found a nifty program that can be run from the command prompt to correct this error in IE9. Be aware however, as stated on the publishers download page:
Changing the embedding value does not give you license to distribute the fonts. You should only change this setting if you are the font creator, or something like that. Use at your own risk.
embed
You need a 32 bit windows box (i.e. fossil) to run the program. I have access to one. I can do it for you if you want to try it.
You should contact p22 and ask them how to solve the permission issues.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}
I downloaded the fonts from the url the google css provided so I could use it without being online. The code works when clicking the .html file and opening it in a browser. However, when I place all my files on a local webserver it does not work.
Any ideas? Keep in mind, I will not be connected to the internet.
Adam there might be various reasons for this behavior as #Kyle suggested
First i would check the url to the font-file resolves correctly. From your CSS declaration above it seems that browser will expect the file to be present in same directory where CSS exists
Second and yes google might have blocked leeching/downloading the files. Only way to check this is first use the font to be loaded from google service 'Note the size of the file' then download and check the size. If they are same they do allow download
Third webfonts need to be browser specific here is the explanation from themselves
When a browser sends a request for a Font API stylesheet (as specified
in a tag in your web page), the Font API serves a stylesheet
generated for the specific user agent making the request.
so each time your browser requests the font you are actually downloading a small CSS snippet and then the Font family from the directory
Its strange if the font works fine on computer by opening html file, but not with the localhost. Are you sure you are copying all font files and placing in the same directory? Since the file name is so complicated and long, may be you are doing some mistake with the names? Are you using same browser?
And no, There is nothing like Google does not let downloading the files. Just to make sure, I have downloaded a font (GloriaHallelujah) from google fonts and tested with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google font test</title>
<style type="text/css" media="screen">
#font-face {
font-family: GloriaHallelujah;
src: url('GloriaHallelujah.ttf');
}
h1 { font-family: GloriaHallelujah, helvetica, arial; }
</style>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
This work fine on desktop, as well as local host. May be you can download same font from here, place in the same directory and then test on your localhost and see.
On my Windows 7 IIS server I had to add woff in the mime types to get them to work.
I've been developing a site that uses the Google Fonts API. It's great, and supposedly has been tested in IE, but when testing in IE 8 the fonts simply don't get styled.
I included the font, as Google instructs, thus:
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"
rel="stylesheet" type="text/css" />
and added its name to the front of a font family in CSS thus:
body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}
Works like a charm in Chrome, Firefox, Safari. No dice in IE 8. Anybody know why?
Looks like IE8-IE7 can't understand multiple Google Web Font styles through the same file request using the link tags href.
These two links helped me figure this out:
See this open Google issue, and look at the comments.
Also see this StackOverlow Answer Google Web Fonts don't work in
IE8
The only way I have gotten it to work in IE7-IE8 is to only have one Google Web Font request. And only have one font style in the href of the link tag:
So normally you would have this, declaring multiple font styles in the same request:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />
But in IE7-IE8 add a IE conditional and specify each Google font style separately and it will work:
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->
Hope this can help others!
The method, as indicated by their technical considerations page, is correct - so you're definitely not doing anything wrong. However, this bug report on Google Code indicate that there is a problem with the fonts Google produced for this, specifically the IE version. This only seems to affect only some fonts, but it's a real bummmer.
The answers on the thread indicate that the problem lies with the files Google's serving up, so there's nothing you can do about it. The author suggest getting the fonts from alternative locations, like FontSquirrel, and serving it locally instead, in which case you might also be interested in sites like the League of Movable Type.
N.B. As of Oct 2010 the issue is reported as fixed and closed on the Google Code bug report.
Google Fonts uses Web Open Font Format (WOFF), which is good, because it's the recommended font format by the W3C.
IE versions older than IE9 don't support Web Open Font Format (WOFF) because it didn't exist back then. To support < IE9, you need to serve your font in Embedded Open Type (EOT). To do this you will need to write your own #font-face css tag instead of using the embed script from Google. Also you need to convert the original WOFF file to EOT.
You can convert your WOFF to EOT over here by first converting it to TTF and then to EOT:
http://convertfonts.com/
Then you can serve the EOT font like this:
#font-face {
font-family: 'MyFont';
src: url('myfont.eot');
}
Now it works in < IE9. However, modern browsers don't support EOT anymore, so now your fonts won't work in modern browsers. So you need to specify them both. The src property supports this by comma seperating the font urls and specefying the type:
src: url('myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype');
However, < IE9 doesn't understand this, it just graps the text between the first quote and the last quote, so it will actually get:
myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype
as the URL to the font. We can fix this by first specifying a src with only one url which is the EOT format, then specifying a second src property that's meant for the modern browsers and < IE9 will not understand. Because < IE9 will not understand it it will ignore the tag so the EOT will still be working. The modern browsers will use the last specified font they support, so probably WOFF.
src: url('myfont.eot');
src: url('myfont.woff') format('woff');
So only because in the second src property you specify the format('woff'), < IE9 won't understand it (or actually it just can't find the font at the url myfont.woff') format('woff) and will keep using the first specified one (eot).
So now you got your Google Webfonts working for < IE9 and modern browsers!
For more information about different font type and browser support, read this perfect article by Alex Tatiyants:
http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/
While Yi Jiang's solution may work, I don't believe abandoning the Google Web Font API is the right answer here. We serve a local jQuery file when it's not properly loaded from the CDN, right?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>
So why wouldn't we do the same for fonts, specifically for < IE9?
<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->
Here's my process when using custom fonts:
Download the font's ZIP folder from Google, and use Font Squirrel's
#font-face Generator to create the local web font.
Create a fonts.css file that calls the newly created, locally hosted font files (only linking to the file if < IE9, as shown above). NOTE: The #font-face Generator creates this file for you.
#font-face {
font-family: 'cardoitalic';
src: url('cardo-italic-webfont.eot');
src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('cardo-italic-webfont.woff') format('woff'),
url('cardo-italic-webfont.ttf') format('truetype'),
url('cardo-italic-webfont.svg#cardoitalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'cardobold';
src: url('cardo-bold-webfont.eot');
src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('cardo-bold-webfont.woff') format('woff'),
url('cardo-bold-webfont.ttf') format('truetype'),
url('cardo-bold-webfont.svg#cardobold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'cardoregular';
src: url('cardo-regular-webfont.eot');
src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('cardo-regular-webfont.woff') format('woff'),
url('cardo-regular-webfont.ttf') format('truetype'),
url('cardo-regular-webfont.svg#cardoregular') format('svg');
font-weight: normal;
font-style: normal;
}
Using IE conditional classes in your main stylesheet to avoide faux weights and styles, your font styles might look like this:
h1{
font-size:3.25em;
font-weight:normal;
font-style:italic;
font-family:'Cardo','cardoitalic',serif;
line-height:1.25em;
}
h2{
font-size:2.75em;
font-weight:700;
font-family:'Cardo','cardobold',serif;
line-height:1.25em;
}
strong
,b{
font-family:'Cardo','cardobold',serif;
font-weight:700,
}
.lt-ie9 h1{
font-style:normal;
}
.lt-ie9 h2{
font-weight:normal;
}
.lt-ie9 strong,
.lt-ie9 b{
font-weight:normal,
}
Sure, it's a little extra work, but haven't we come to expect this from IE? Besides, it becomes second-nature after awhile.
For what its worth, I couldn't get it working on IE7/8/9 and the multiple declaration option didn't make any difference.
The fix for me was as a result of the instructions on the Technical Considerations Page where it highlights...
For best display in IE, make the stylesheet 'link' tag the first
element in the HTML 'head' section.
Works across IE7/8/9 for me now.
I tried all the options from above and they didn't work.
Then I located the google font (Over the Rainbow) in my folder (new) and used IE conditional below and it worked perfect.
<!--[if IE]>
<style type="text/css">
#font-face {
font-family: "Over the Rainbow";
src: url("../new/over.ttf");
src: local("Over the Rainbow"), url("../new/over.ttf");
}
</style>
<![endif]-->
I hope it will help
You can try fontsforweb.com where fonts are working for all browsers, because they are provided in TTF, WOFF and EOT formats together with CSS code ready to be pasted on your page i.e.
#font-face{
font-family: "gothambold1";
src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot');
src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype");
}
.fontsforweb_fontid_5903 {
font-family: "gothambold1";
}
or you can download them zipped in a package with CSS file attached
then just add class to any element to apply that font i.e.
<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2>
See it working: http://jsfiddle.net/SD4MP/
It's all about trying all those answers, for me, nothing works except the next solution:
Google font suggested
#import 'https://fonts.googleapis.com/css?family=Assistant';
But, I'm using here foreign language fonts, and it didn't work on IE11 only. I found out this solution that worked:
#import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';
Hope that save someone precious time
Try this type of link , it will run in also IE . hope this helps .
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>
I had the same problem with you.
I found a solution using a Adobe Web Fonts code, work perfect in Internet Explorer, Chrome, Firefox and Safari.
More info in this page: http://html.adobe.com/edge/webfonts/
After my investigation, I came up to this solution:
//writing the below line into the top of my style.css file
#import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew');
MUST OBSERVE:
We must need to write the font-weight correctly of this font. For example: font-weight:900; will not work as we have not included 900 like 200,300,400,600,700,800 into the URL address while importing from Google with the above link. We can add or include 900 to the above URL, but that will work only if the above Google Font has this option while embedding.