This question already has answers here:
How to add some non-standard font to a website?
(21 answers)
Closed 9 years ago.
I am going to use #font-face. So I copied corbel font to my directory and there it shows 4 fonts CORBEL_0.TTF , CORBELB_0.TTF , CORBELI_0.TTF , CORBELZ_0.TTF and next I copied Kozuka Gothic Pro font to my directory and there it shows 6 fonts KozGoPro-Bold.otf , KozGoPro-ExtraLight.otf , KozGoPro-Heavy.otf , KozGoPro-Light.otf , KozGoPro-Medium.otf , KozGoPro-Regular.otf
How to write src using #font-face rule?
As in example url("../../css/fonts/League_Gothic.eot") format('eot'); the format eot , is it the extension of font? Anyone give me the idea for full syntax within #font-face.
#font-face
{
font-family: corbel;
src: url('/fonts/corbel.ttf'),
url('/fonts/corbel.eot');
}
#font-face
{
font-family: Kozuka;
src: url('/fonts/Kozuka.ttf'),
url('/fonts/Kozuka.eot');
}
Like this:
#font-face {
font-family: 'Kozuka Gothic Pro';
src: url("../../css/fonts/Kozuka Gothic Pro.otf") format('truetype');
src: local("☺"),
url("../../css/fonts/KozGoPro-Bold.otf"),
url("../../css/fonts/KozGoPro-ExtraLight.otf") format('truetype'),
url("../../css/fonts/KozGoPro-Heavy.otf") format('truetype'),
url("../../css/fonts/KozGoPro-Light.otf") format('truetype');
url("../../css/fonts/KozGoPro-Medium.otf") format('truetype')
url("../../css/fonts/KozGoPro-Regular.otf") format('truetype');
}
Related
Apologies if has been asked before. Pretty new to using Itext. Haven't managed to find the solution to my issue.
I have an html file using 2 non standard font families:
p {font-size:small; font-family:Arial; font-style:normal; margin:0; padding:0 0 15px 0; color:#000000;}
span.header {font-size:32pt; font-family:Comic Sans MS; font-style:bold; border:0; margin:0; padding:0 0 0 0; color:#000000;}
*****
and more
However I haven't been able to get it converted into pdf correctly. The generated pdf file doesn't seem to be picking up 'Comic Sans MS' font at all. Also the layout is distorted (split into 2 pages) with data missing from html. It looks like it's overriding the font sizes and family with Arial throughout.
This is what I have in code:
public static final String FONT1 = "src/main/resources/fonts/Arial.ttf";
public static final String FONT2 = "src/main/resources/fonts/Arial Bold.ttf";
public static final String FONT3 = "src/main/resources/fonts/Comic Sans MS.ttf";
PdfWriter writer = new PdfWriter(dest);
PdfDocument pdf = new PdfDocument(writer);
ConverterProperties properties = new ConverterProperties();
properties.setBaseUri(baseUri);
MediaDeviceDescription mediaDeviceDescription =
MediaDeviceDescription.createDefault();
mediaDeviceDescription.setOrientation("Portrait");
properties.setMediaDeviceDescription(mediaDeviceDescription);
// Passing false three times means not loading standard PDF fonts, fonts shipped with pdfHTML and system fonts
FontProvider fontProvider = new DefaultFontProvider(false, false, false);
FontProgram fontProgram1 = FontProgramFactory.createFont(FONT1);
FontProgram fontProgram2 = FontProgramFactory.createFont(FONT2);
FontProgram fontProgram3 = FontProgramFactory.createFont(FONT3);
fontProvider.addFont(fontProgram1, "Winansi");
fontProvider.addFont(fontProgram2, "Winansi");
fontProvider.addFont(fontProgram3, "Winansi");
properties.setFontProvider(fontProvider);
HtmlConverter.convertToPdf(new FileInputStream(src), pdf, properties);
Can somebody please advise what I am missing? Thanks
This question already has answers here:
Google Fonts Font Doesn't load
(6 answers)
Closed 3 years ago.
I'm trying to use a google font with my extension on the content script side - the Noto font I have downloaded and loading from the extension directory works (it is also declared in web_accessible_resources) and works fine in the ShadowDOM but the google font doesn't
I'm injecting this style text into the head:
var styleNode = document.createElement("style");
styleNode.type = "text/css";
styleNode.textContent =
"#font-face { font-family: Noto Serif; src: url('" +
browser.extension.getURL("NotoSerifCJKjp-SemiBold.otf") +
"') format('opentype'); } #font-face { font-family: Poppins; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); }";
document.head.appendChild(styleNode);
I also tried putting
#import url("https://fonts.googleapis.com/css?family=Poppins");
in the shadow dom style but that didn't work either
Adding the fonts as a link worked, no idea why:
var linkNode = document.createElement("link");
linkNode.type = "text/css";
linkNode.rel = "stylesheet";
linkNode.href = "//fonts.googleapis.com/css?family=Poppins";
document.head.appendChild(linkNode);
also can be done like this:
<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
as per Google Fonts Font Doesn't load
It seems like this can be done... but all the suggestions I've seen online aren't working for me. I have a customFont.ttf tile that I'm putting in this dir: 'home/greg/Documents/MapBox/project/myproject/customFont.ttf'
Then I'm using this code:
Map { font-directory: url(customFont.ttf); }
or
Map { font-directory: url(''); }
or
Map { font-directory: url(fonts/customFont.ttf); }
but nothing is working. I just get en error message such as:
"Invalid value for text-face-name, the type font is expected. comicSansMs, Arial Regular (of type string) was given. (line 71)"
any tips?
place your fonts in the folder app/assets/fonts, lib/assets/fonts or vendor/assets/fonts
If Rails 4+, you can only place your fonts in the folder app/assets/fonts.
In css:
#font-face {
font-family: 'customFont';
src:url('customFont.ttf');
font-weight: normal;
font-style: normal;
}
So I am currently trying to import a variety of Avenir Next LT Pro fonts, which I have local access to, into a web application.
I can successfully use the italic, bold, and regular versions with no problem - but the Demi font option does not work.
I import them using SASS as so:
#mixin font($family, $path) {
font-family: $family;
#font-face {
font-family: $family;
src: url("../assets/font/"+$path) format('opentype');
}
}
.avenirNext-italic {
#include font('AvenirNext-italic', "AvenirNext/AvenirNextLTPro-It.otf");
}
.avenirNext-demi {
#include font('AvenirNext-demi', "AvenirNext/AvenirNextLTPro-Demi.otf");
}
.avenirNext-bold {
#include font('AvenirNext-bold', "AvenirNext/AvenirNextLTPro-Bold.otf");
}
.avenirNext-regular {
#include font('AvenirNext-regular', "AvenirNext/AvenirNextLTPro-Regular.otf");
}
Why won't Demi work? all of the others I can use with no issues.
I've looked at things like Cufon and typeface.js but they seem to be SIFR alternatives and don't allow you to set freeform coordinates and draw custom type onto a <canvas>
Anyone got any ideas?
I've thrown together a simple demo on jsfiddle here showing how to do this with #font-face: http://jsfiddle.net/zMKge/
Opera also has a simple tutorial on using <canvas>, including the text API.
CSS:
#font-face {
font-family: 'KulminoituvaRegular';
src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}
Javascript:
var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
ctx.drawImage(this, 0,0,this.width, this.height);
ctx.font = '68px KulminoituvaRegular';
ctx.fillStyle = 'orangered';
ctx.textBaseline = 'top';
ctx.fillText ('Keyboard Cat', 0, 270);
};
I have just answered this question here: Preload font HTML5, JS, Kinetic.js?
The essential part:
#font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#myfont') format('svg');
font-weight: normal;
font-style: normal;
}
It should not matter if you are using KineticJS or not, the only difference without KineticJS is that you would possibly create the Canvas element directly with HTML instead of using a div layer as container. After all KineticJS just creates a normal Canvas element in that container.
an answer from 3 years into the future lol
you can user javascript's new FontFace(family, font, descriptor)
https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace
where family is the name of the font, font is a url or ttf binary data, and descriptor is css elements.
then use ctx.fillText() to create the text