My website allows user write short stories. I want they can free to format and style text, so I install NicEdit to do that. But NicEdit just has 9 default fonts; how to add more?
This is my editor. It use default code with full panel control.
Very happy, I've added news fonts NicEdit successful. I post answer here, hope it userful for everyone has the same problem.
1.Download font file, save in some folder, in my way is 'css/font'
2.Register in css file: add a css file "CustomFonts.css" has content:
(I use Fugaz One download from Google Font)
#font-face {
font-family: "FugazOne";
src: url('font/FugazOne-Regular.ttf');
src: url('font/FugazOne-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
You may change path to font file.
3.Link css file in html form, before add nicEdit.js lib:
<link rel="stylesheet" type="text/css" href="css/customFont.css" />
<script type="text/javascript" src="js/nicEdit/nicEdit_dev.js"></script>
4.Open nicEdit.js and find word "nicEditorFontFamilySelect". You will see a fonts list use in nicEdit, add new font here by font-family register in css:
sel : {'arial' : 'Arial',..., 'FugazOne':'FugazOne'},
5.tada... DONE!
P/s: when show content from database, you must sure webpage had load customFont.css.
Related
I am trying to add highlight.js to my Hugo website with Anatole theme.
This is how a code chunk looks like before adding highlightjs:
And this is how it looks like after adding highlight.js:
This is of course not the way it should look.
To add highlight.js I added the following code to layouts/partials/head.html:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/r.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/python.min.js">
</script>
And I added the following code to layouts/partials/article_footer_js.html:
<script>hljs.initHighlightingOnLoad();</script>
What am I doing wrong?
So, I'm not very good at css but I found a solution. My solution was to add a file assets/scss/partials/components/_code.scss with the following content:
pre code.hljs,
code.hljs,
.hljs,
.hljs-comment,
.hljs-tag,
.hljs-punctuation,
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr,
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name,
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion,
.hljs-title,
.hljs-section,
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo,
.hljs-literal,
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition,
.hljs-meta,
.hljs-meta .hljs-string,
.hljs-emphasis,
.hljs-strong {
font-family: monospace, monospace;
}
And then adding the following line at the end of assets/scss/main.scss:
#import './partials/components/code';
With these changes the font family of the highlighted code went back to monospace and the font size is the same for all the code.
In my nextJS application, I need to load a stylesheet dynamically based on the user preference received from the database.
So, in my page, I'm adding it in the Head (next/head), as follows:
<Head>
<link rel="stylesheet" href={`/fonts/${type}/stylesheet.css`}></link>
</Head>
However, this is giving me a warning in the console in development mode:
Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="/fonts/cal/stylesheet.css"). Use Document instead.
See more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-component
The stylesheet itself contains the font-face:
#font-face {
font-family: "Cal Sans";
src: url("CalSans-SemiBold.woff2") format("woff2"),
url("CalSans-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
Since the user's preference is stored in the database, and I receive this value via a query, I don't know how I can add it to the Document.js file.
I'll really appreciate any help on this.
While it might be possible to dynamically import a CSS file in your main app component (and you can check out an example in this guide), I would suggest a different solution.
Include all stylesheets in your application, but make its styles only apply when the html (or body) element has a certain class. Then all you need to do is modify that class based on user preference.
// styles.css
body.themeFoo #container {
// some styles...
}
This is how many implementations of dark mode work, e.g. in tailwind CSS. I believe this is a better pattern to solve your problem.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" href="..." />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
This problem is resolved in the new Nextjs version where they provide support for Font Optimization, as documented here - https://nextjs.org/docs/basic-features/font-optimization
It also supports font self-hosting which was the key to my requirements.
So I'm creating a full stack React/Node site, my custom fonts don't load on half my pages so far though, one with loads of content and one with no content.. and then they do work on one with loads of content and one with no content ?!? and I have another front end only page where they did originally worked and then stopped working again
I'm assuming its because I'm on a ubuntu virtual machine on my laptop using 5gb ram, is there anything I can do to make it work? I think I can add more ram eventually but is there another fix?
im using chakra UI as well
font face
import { Global } from "#emotion/react";
const Fonts = () => (
<Global
styles={`
#font-face {
font-family: 'BebasNeue';
src: url(fonts/BebasNeue-Regular.woff) format('woff');
}
#font-face {
font-family: 'Vollkorn';
src: url(fonts/Vollkorn.woff) format('woff');
}
#font-face {
font-family: 'Neoneon';
src: url(fonts/Neoneon.woff) format('woff');
} `}
/>
);
export default Fonts;
My pre loads in html
<link
rel="preload"
as="font"
href="./fonts/BebasNeue-Regular.woff2"
type="font/woff2"
crossorigin="anonymous"
value="valid"
/>
<link
rel="preload"
as="font"
href="./fonts/Neoneon.woff2"
type="font/woff2"
crossorigin="anonymous"
value="valid"
/>
<link
rel="preload"
as="font"
href="./fonts/Vollkorn.woff2"
type="font/woff2"
crossorigin="anonymous"
value="valid"
/>
the error codes
ownloadable font: download failed (font-family: "Neoneon" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:3000/recipe/fonts/Neoneon.woff
The resource at “http://localhost:3000/recipe/fonts/BebasNeue-Regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
Proxy error: Could not proxy request /recipe/fonts/Vollkorn.woff from localhost:3000 to http://localhost/5000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED)
This works for me using chakra and nextjs.
create a file styles.css with
#font-face {
font-family: "Font";
src: url('../your/path/Font.woff');
font-weight: normal;
font-style: normal;
}
in your index.js
import '../path/styles.css'
then you can use fontFamily properties or use in your theme
export default extendTheme({
// ...
fonts: {
body: `Font`,
},
})
do you don't need to use link and Global component
hi how can i use some custom font in my ionic app?
for example this font
http://fontonline.ir/btitrbold.html
<link href='http://www.fontonline.ir/css/BTitrBold.css' rel='stylesheet' type='text/css'>
but if my app is offline fonts won't load
i open the Reference
#font-face {
font-family: 'BTitrBold';
src: url('http://fontonline.ir/fonts/BTitrBold.eot?#') format('eot'),
url('http://fontonline.ir/fonts/BTitrBold.ttf') format('truetype'),
url('http://fontonline.ir/fonts/BTitrBold.woff') format('woff');
}
can i download fonts and put it in for example assets folder and change style code to load it offline?
Download your required Font and add it to your assets/fonts folder.
Go to your theme folder open variable.scss file
import your font like:
#font-face {
font-family: 'YOUR_FONT_NAME';
src: url('../assets/fonts/YOUR_FONT_NAME.ttf');
font-weight: normal;
font-style: normal;
}
If you want to use it for Whole app then add it to your global.scss file
e.g:
* {
font-family: 'YOUR_FONT_NAME'; // font-family name you declared above.
}
CSS Code
#font-face {
font-family: Calibri;
src: url("fonts/calibri.ttf");
font-style: normal;
}
JS Code
doc.setFont('Calibri');
doc.setFontSize(7.5);
doc.setFontType("normal");
doc.text(10, 10, "Hi, How r u");
I want to add Calibri Font, but it is not working
List of js script included
<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script>
CSS
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Apr 23, 2017, 12:57:52 PM
Author : common
*/
#font-face {
font-family: Calibri;
src: url("fonts/calibri.ttf");
font-style: normal;
}
/*
#font-face {
font-family: Calibri;
src: url("fonts/calibrii.ttf");
font-style: italic;
}
#font-face {
font-family: Calibri;
src: url("fonts/calibrib.ttf");
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: Calibri;
src: url("fonts/calibriz.ttf");
font-style: italic;
font-weight: bold;
}*/
For jsPdf Version 1.4.0 and later there is possibility for using custom font (ttf). Custom font should be base64 encoded. Unfortunately, not all fonts working.
var doc = new jsPDF('landscape');
// to generate 'yourCustomFontTtfBase64Encoded' you can use
// jsPDF-CustomFonts-support library (on their
// github page there are all instructions for that)
doc.addFileToVFS('yourCustomFont.ttf', 'yourCustomFontTtfBase64Encoded');
doc.addFont('yourCustomFont.ttf', 'yourCustomFont', 'normal');
doc.setFont('yourCustomFont');
jsPDF-CustomFonts-support library for generating 'yourCustomFontTtfBase64Encoded' is here: https://github.com/sphilee/jsPDF-CustomFonts-support
Hi you can try and modify fonts like this,
API.addFont = function(fontScript, font, style) {
addFont(fontScript, font, style, 'StandardEncoding');
};
above function you will have to add to lib/before your font change invocation, but i would suggest add script tag just after you load jspdf, and add this function in that script tag.
Now you need to add font css,
and then you can modify font of the pdf like this.
doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal');
doc.setFont('Calibri');
doc.text(50,50,'Now this is Calibri');
Here's is the solution I'm using. Works well (see below for working codepen)...
First, as others have mentioned - you'll need these two libraries:
jsPDF: https://github.com/MrRio/jsPDF
jsPDF-CustomFonts-support: https://github.com/sphilee/jsPDF-CustomFonts-support
Next - the second library requires that you provide it with at least one custom font in a file named default_vfs.js. I'm using two custom fonts - Arimo-Regular.ttf and Arimo-Bold.ttf - both from Google Fonts. So, my default_vfs.js file looks like this:
(function (jsPDFAPI) {
"use strict";
jsPDFAPI.addFileToVFS('Arimo-Regular.ttf','[Base64-encoded string of your font]');
jsPDFAPI.addFileToVFS('Arimo-Bold.ttf','[Base64-encoded string of your font]');
})(jsPDF.API);
Obviously, your version would look different, depending on the font(s) you're using.
There's a bunch of ways to get the Base64-encoded string for your font, but I used this: https://www.giftofspeed.com/base64-encoder/.
It lets you upload a font .ttf file, and it'll give you the Base64 string that you can paste into default_vfs.js.
You can see what the actual file looks like, with my fonts, here: https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js
So, once your fonts are stored in that file, your HTML should look like this:
<script src="js/jspdf.min.js"></script>
<script src="js/jspdf.customfonts.min.js"></script>
<script src="js/default_vfs.js"></script>
Finally, your JavaScript code looks something like this:
const doc = new jsPDF({
unit: 'pt',
orientation: 'p',
lineHeight: 1.2
});
doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");
doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);
doc.text("Hello, World!", 100, 100);
doc.setFontType("bold");
doc.text("Hello, BOLD World!", 100, 150);
doc.save("customFonts.pdf");
This is probably obvious to most, but in that addFont() method, the three parameters are:
The font's name you used in the addFileToVFS() function in the default_vfs.js file
The font's name you use in the setFont() function in your JavaScript
The font's style you use in the setFontType() function in your JavaScript
You can see this working here: https://codepen.io/stuehler/pen/pZMdKo
Hope this works as well for you as it did for me.
You can't at the moment.
If you take a look to the source code, you see there is a switch that, if it doesn't know the font, returns times as font
switch (fontName) {
case 'sans-serif':
case 'verdana':
case 'arial':
case 'helvetica':
fontName = 'helvetica';
break;
case 'fixed':
case 'monospace':
case 'terminal':
case 'courier':
fontName = 'courier';
break;
case 'serif':
case 'cursive':
case 'fantasy':
default:
fontName = 'times';
break;
}
You can either use one of that fonts, or edit the library to support your font.
Otherwise, there is a work in progress library that add support to custom fonts: https://github.com/sphilee/jsPDF-CustomFonts-support
After adding all the needed files, you should use it like this:
doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal');
Like stated above you can use the jsPDF-CustomFonts-support library at https://github.com/sphilee/jsPDF-CustomFonts-support.
There are instructions on the READ.ME file, but what got me going were these instructions https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041:
Upload your .ttf font to Font Squirell https://www.fontsquirrel.com/tools/webfont-generator
Press download and you will get a compressed file with a new .ttf file. Now you have to encode to base64 https://www.giftofspeed.com/base64-encoder/.
Once you have the base64 code of your font you have to go to the vfs_fonts.js file that you have download with the jsPDF-CustomFonts-support https://github.com/sphilee/jsPDF-CustomFonts-support and after one of the ',' used to separate the different fonts in that file you have to add: "YOUR_FONT_NAME.ttf":"YOUR BASE64 CODE", (remember to finish with a comma at the end, after the quotes).
Once you do that you can add the function doc. addFont("YOUR_FONT_NAME.ttf","YOUR_FONT_NAME.ttf","normal","WinAnsiEncoding").