Hi guys I have a question
I want to use FuturaPtBook, but it isn't displayed in html as the real font.
What can I do ?
<span></span> Hello
You can use the #font-face rule.
Either obtain or create your custom font file.
Upload the font file(s) to your server under your Web root.
Add this code to either your CSS or <style> tags in the HTML header:
#font-face{
font-family: Futura Book;
src: url('the URL the file should be downloaded from');
}
Related
I am trying to upload a custom font to a webpage I am working on and cannot figure out why it won't work. I know it won't work in the snippet at the font file is not uploaded, but given the fact that the path to the file is correct and the css file is linked to the html document shouldn't it work properly?
#font-face {
font-family: 'customFont';
src: url(../fonts/BebasNeueBook.otf) format("otf");
}
.text{
color: rgb(87, 87, 87);
font-family: customFont !important;
}
<span class="phone text">T. 1 877 412 0888</span>
Honestly your code seems about right... but only .otf file.
Try dragging your otf font into this site: https://transfonter.org/ which will give you all the webfont formats in one download and the css needed to make it work.
If it doesn't show up after that, then something else is up
I want to use cusotom fonts for my website that is like this :
myfile.php
<p class="custom-fonts">here i want to apply fonts</p>
In fonts folder i have placed this font gurbaniwebthick.ttf and using it in css like this
style.css
#font-face {
font-family: "My Custom Font";
src: url(.../fonts/gurbaniwebthick.ttf) format("truetype");
}
But this is not working for me what should i do please help me with it ,
#font-face {font-family: "My Custom Font"; src: url('../fonts/gurbaniwebthick.ttf') ;}
use the font-family as
class{
font-family: My Custom Font;
}
And also I guess you are not pointing the file correctly.
Add this to your CSS file:
.custom-fonts {font-family: "My Custom Font";}
Basically with the #font-face you define that the name "My Custom Font" should point to the specified url. After that in the CSS file you can use "My Custom Font", and the browser will know where to load the file from.
Also make sure that the font file is reachable where you specified it.
Hope this helps.
You have done the first two steps you need, but there is one further step required. This is to associate your new font-face with the class of the p tag, like so:
p.custom-fonts {
font-family: 'My Custom Font'
}
You can see an example of this from Google Web Fonts: http://www.google.com/fonts#QuickUsePlace:quickUse/Family: (and some example CSS: http://fonts.googleapis.com/css?family=Wellfleet)
I have some custom icons that I want to use as a webface font:
However, I can't seem to get them displayed.. All I get to see is the corresponding letter ('a' and 'f'). As shown here You'll also see the working example of the font 'socialico'
Use #font-face In the past I had lots of troubles with font-face but if you type it out right it works fine:
#font-face {
font-family: 'Custom Font Name';
font-style: normal;
font-weight: 400;
src: url(linktofont.com/font.ttf) format('truetype');
}
Replace "Custom Font Name" with what you would like your font to be named when using CSS. and replace "linktofont.com/font.ttf" with the path to the font.
EDIT
Sorry, I read that wrong, I found the problem. If you look at your #import
#import url (http://pastebin.com/raw.php?i=sc4rCApa);
You have a space between "url" and your path, so reaplace it with:
#import url(http://pastebin.com/raw.php?i=sc4rCApa);
I had the same issue - and all my syntax was correct. I was instructed by a friend that it may be the font itself that was broken or incorrect. Here's how it was resolved:
(1) Used original font downloaded from fontfabric.com
(2) Went to www.fontsquirrel.com to generate a new font kit... including the css
(3) Uploaded fonts generated from FontSquirrel
(4) Replaced my CSS with the css generated from FontSquirrel for the #font-face section
(5) Updated the name of the font that is called for later in the CSS
and that was it.... worked like a charm!
I have a standalone HTML document I want to distribute, without any external dependencies. I'm using a non-standard font in this document that only some of my users will have installed.
For those users that do not have the font installed, I am including a copy of the font in an embedded SVG document at the top of the <body>. (I'm using a one-glyph font for this example, the real document is using a complete font.)
<svg style="display: none;"><defs>
<font id="MyFontElement">
<font-face font-family="MyFont" />
<glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />
</font>
</defs></svg>
SVG fonts do not look as nice as ordinary fonts, so I only want the SVG font to be used if the font is not installed locally. If the font was defined in an external SVG document, I could use it at a lower priority than the locally-installed font like this: (fiddle)
<style>
#font-face {
font-family: "My Font";
src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
Unfortunately, none of the obvious variations seem to work for a font in the current document: (fiddle)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
Even without a #font-face declaration, the font is already available in the document as MyFont, the font-family specified in the <font-face />. However, this will be used at a higher priority than a native font named MyFont, so it is not an solution.
I hoped that I might be able to refer to it as local("MyFont")... (fiddle)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
...but that doesn't work either.
I could give the embedded font a different name and use it at a lower priority, style="font-family: LocalFont, EmbeddedFont", but I'm allowing users to import snippets from local files into the document and those local files will refer to the font only by the standard name. It would be possible to rewrite these references when they're imported, but I don't like that solution.
How do I refer to an SVG font embedded in the current document from a #font-face declaration?
Convert the font to a data URI and embedded it in the CSS declaration: (fiddle)
<style>
#font-face {
font-family: "My Font";
src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
There's one caveat: you can't use an ID specifier (#MyFont) with a data URI like this. Therefore you can only have a single font in the encoded file, rather than having multiple and referring to them individually. (Not that you'd want to; duplicating the data for multiple embedded fonts in the declaration for each font would be a huge waste of space.)
Specify the local font name first in the css, then the embedded font name:
p {
font-family: MyFontLocalName, MyFontEmbeddedName;
}
http://jsfiddle.net/gilly3/xX6Bv/5/
If the MyFontLocalName is installed on the user's computer, that font will be used, otherwise MyFontEmbeddedName will be used.
I have problem with embedding Polish fonts into PDF converted from HTML.
My HTML code have style in body:
<BODY style="font-family: Tahoma, Arial, sans-serif;font-size : 8pt;">
I tried 2 ways of converting such HTML into PDF:
FOP with htmlcleaner
iText with flying-saucer
For FOP I can add all used fonts into its config file and then created PDF have those fonts embedded (if font is used in HTML). In resulting PDF I have Tahoma font in Identity-H encoding. It looks good -- all Polish letters are displayed as expected.
Then I tried such conversion with iText: seems simplier because I do not need to create transformation for every HTML. Unfortunately I don't know how to embed used fonts into resulting PDF. Most examples I found create PDF from scratch and I don't know how to apply those methods to the Flying Saucer ITextRenderer or other object used in conversion.
My current code tries to add fonts in PDFCreationListener.preOpen() by getting ITextFontResolver and adding font fs.addFont(path, true);. But all .pdf I create do not have fonts I want.
The second problem is that result PDF do not have Polish letters. Is it problem in Flying Saucer or in iText? Acrobat shows that created PDF document uses Helvetica with Ansi encoding and ArialMT as font. I think this Ansi encoding is not good. How can I set Polish encoding (Identity-H)?
You may try the -fs-pdf-font-embed, and -fs-pdf-font-encoding css rules.
From the User's Guide:
-fs-pdf-font-embed: use with the value embed inside a font-face rule
to have Flying Saucer embed a font file within a PDF document,
avoiding the need to call the addFont() method of the FontResolver
class
-fs-pdf-font-encoding: use inside a font-face rule to specify the
enconding for a custom font you are embedding inside a PDF; takes the
name of the encoding as value.
For example in your print css:
#font-face {
font-family: DejaVu Serif;
src: url(fonts/DejaVuSerif.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
Working example:
Files in the root project directory:
Calibri.ttf
input.html
Code:
File inputFile = new File("input.html");
File outputFile = new File("example.pdf");
ITextRenderer renderer = new ITextRenderer();
String url = inputFile.toURI().toURL().toString();
FileOutputStream fileOutputStream = new FileOutputStream(outputFile);
renderer.setDocument(url);
renderer.getFontResolver().addFont("Calibri.ttf", BaseFont.IDENTITY_H, true);
renderer.layout();
renderer.createPDF(fileOutputStream);
fileOutputStream.close();
HTML:
<style type="text/css">
body {
font-family: Calibri, sans-serif;
}
</style>
Surprisingly #font-face css is not needed
My mistake was to use FontResolver.addFont() in PDFCreationListener.preOpen(). I moved it just before renderer.layout(); and it works now!
If you've tried all the options and it still doesn't work, it's most likely a problem with with a font-family value that doesn't match the file name
You can find out the correct value using FontForge. Open font file in this program, then select the menu item Element -> Font Info. The correct value will be in the Family Name field
Minimum required html code:
<html>
<head>
<style>
body {
font-family: 'Calibri 123', sans-serif;
}
</style>
</head>
<body>
<p>
Hello, Calibri 123
</p>
</body>
</html>
Minimum required java code:
ITextRenderer renderer = new ITextRenderer();
renderer.getFontResolver().addFont("/path/to/font/Calibri.ttf", BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
renderer.setDocumentFromString(/*read html from file*/);
renderer.layout();
renderer.createPDF(/*stream here*/);