Fonts are not taking with the same font-family name using wkhtmltopdf - html

It is known that from the following urls that wkhtmltopdf use only ttf format fonts.
use custom fonts with wkhtmltopdf
Google Web Fonts and PDF generation from HTML with wkhtmltopdf
My website uses only woff, so because of that I am using user-style-sheet to add ttf fonts. I am using many google fonts like Oxygen, Inconsolata, Open Sans, merriweather etc. by using the same font-family name in the user-style-sheet and its rendering correctly.
But the problem is with the fonts 'Open Sans Condensed' and 'sorts mill goudy'. When I am trying to change the font-family name with something else, its properly rendering not exactly with the same name.
I want to use the same names and don't want to change the variable name because I want to use the webfonts and not local fonts.
Second thing is that I don't want to download the fonts to my system and use it but only webfonts.
The way I am using userstylesheet is like this
#font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/829b7e77062a1a06dfc90c29f0f413e2a1de44fe/inconsolata/Inconsolata.ttf') format('truetype');
}
#font-face {
font-family: "sorts mill goudy";
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf') format('truetype');
/*
src: url('https://bienvenidod-fonts.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf') format('truetype');*/
}
#font-face {
font-family: 'Sorts Mill Goudy';
font-style: italic;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Italic.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Light.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Bold.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 400;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLight.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: bold;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondBold.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: italic;
font-weight: 300;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLightItalic.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 400;
font-style: normal;
src:url('http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 700;
font-style: normal;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 700;
font-style: italic;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 800;
font-style: italic;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf') format('truetype');
}
And following is the way I am using the source code in the website
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Droid+Sans+Mono);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic);
#import url(http://fonts.googleapis.com/css?family=Philosopher:400,700,400italic,700italic|Droid+Sans+Mono|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Roboto:400,100,300,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic|EB+Garamond);
#import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
#import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);
#import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700&subset=latin,latin-ext);
#import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic);
#import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
When I am trying to change the font-family name from 'sorts mill goudy' to 'sorts mill goudyy' in the both user-style-sheet and source code..its rendering correctly. What can be problem with the same font-family name?

You can try to use the latest version (0.12) which has support for WOFF fonts.

Related

Pagedjs: how to render PDF while keeping text selectable/editable?

I am using pagedjs to render a pdf and using their starter kit: https://gitlab.coko.foundation/pagedjs/starter-kits/book-spread_esm
When I export a pdf via the page print function, the text is selectable as you would expect.
But when I change the font, the text is not selectable.
In other examples, they have changed the font and the pdf has rendered properly (text is selectable) example: https://gitlab.coko.foundation/pagedjs/starter-kits/book_avanced-interface
So I know this must be possible.
What I have tried
I initially imported the fonts from Google Fonts as follows:
Style.css:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,300;0,400;0,500;0,600;1,100;1,300;1,400;1,500;1,600&display=swap');
body{
font-family: 'Montserrat', 'sans-serif';
}
...
The fonts render correctly, but text is not selectable.
Next, I looked at the advanced example with fonts and saw that they defined local fonts as follows:
Inside: /fonts/VG5000/stylesheet.css:
#font-face {
font-family: 'VG5000';
src: url('VG5000-Regular_web.eot');
src: url('VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
url('VG5000-Regular_web.woff') format('woff'),
url('VG5000-Regular_web.woff2') format('woff2'),
url('VG5000-Regular_web.ttf') format('truetype'),
url('VG5000-Regular_web.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Then it is used in /style-print.css as:
h1{
font-family: 'VG5000';
text-align: center;
}
So I mimicked this with my fonts (albeit a bit more complicated):
File structure in /fonts/Montserrat/:
static/
\_Montserrat-Black.ttf
\_Montserrat-BlackItalic.ttf
\_Montserrat-Bold.ttf
\_Montserrat-BoldItalic.ttf
\_Montserrat-ExtraBold.ttf
\_Montserrat-ExtraBoldItalic.ttf
\_Montserrat-ExtraLight.ttf
\_Montserrat-ExtraLightItalic.ttf
\_Montserrat-Italic.ttf
\_Montserrat-Light.ttf
\_Montserrat-LightItalic.ttf
\_Montserrat-Medium.ttf
\_Montserrat-MediumItalic.ttf
\_Montserrat-Regular.ttf
\_Montserrat-SemiBold.ttf
\_Montserrat-SemiBoldItalic.ttf
\_Montserrat-Thin.ttf
\_Montserrat-ThinItalic.ttf
Montserrat-Italic-VariableFont_wght.ttf
Montserrat-VariableFont_wght.ttf
stylesheet.css
Inside /fonts/Montserrat/stylesheet.css:
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
This renders properly on the website, but on PDF the font does not load:
Web rendering:
PDF rendering:
It is the same as before, text is not selectable.
The final thing I have tried is looking in the docs, specifically searching font site:pagedjs.org, but there is nothing specific in the documentation about fonts and editable pdfs.

CervoNeue font issue

I have a question regarding the CervoNeue font.
For some reason when the font looks like this on a website (as you can see there are some letters that look weird, and this only happens if the screen size is over 1024px):
I tried the font locally and it looks like it should.
I tried declaring it in multiple ways:
a)
#font-face {
font-family: "CervoNeue-Light";
font-style: normal;
font-weight: 300;
src: url('../fonts/CervoNeueLightNeue.woff2') format('woff2'), url('../fonts/CervoNeueLightNeue.woff') format('woff');
}
#font-face {
font-family: "CervoNeue-Regular";
font-style: normal;
font-weight: 400;
src: url('../fonts/CervoNeueRegularNeue.woff2') format('woff2'), url('../fonts/CervoNeueRegularNeue.woff') format('woff');
}
b)
/* CervoNeue Light */
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueLightNeue.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueLightNeue.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueLightNeueItalic.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueLightNeueItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
/* CervoNeue Regular */
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueRegularNeue.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueRegularNeue.woff') format('woff');
font-weight: 400;
font-style: normal;
}
I also noticed something odd in the Network tab:
The preview of the font is weird, compared to how it should look. Locally, the preview is just not available.
The font-face declarations also seem to appear as they should inside the final css file.
Any help would be appreciated, thanks!

How do I change my website's font on Github Pages?

I am completely new to website design and programming. I have created a website on Mobirise, and am storing it on Github. I am looking to change the font across the website, as I no longer like the one that I had chosen on Mobirise when I exported it to Github.
I have uploaded the font files that I would need to use to the /OpenSansFonts folder in my repository at: https://github.com/SkyBetChampionship/Sky-Bet-Championship/tree/gh-pages.
Would anybody please be able to advise me what to do next to change the font across my website?
Thank you in advance,
Adam
You can create separate *.css file with this code, or add this code in your assets/mobirise/css/mbr-additional.css (if you create separate file, don't forget import this file in your home.html.
#font-face {
font-family: 'OpenSans-Light';
src: url('/OpenSansFonts/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'OpenSans-Light';
src: url('/OpenSansFonts/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-RegularItalic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'OpenSans-Semibold';
src: url('/OpenSansFonts/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'OpenSans-SemiBold';
src: url('/OpenSansFonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
For change font across web site, add to body in assets/mobirise/css/mbr-additional.css font-family property.
body {
font-family: 'OpenSans';
font-weight: 400;
font-style: normal;
line-height: 1.5;
}
For import separate css file with fonts, add in your home.html around 42 string this code:
<link rel="stylesheet" href="your_path_to_file/file_with_fonts.css" type="text/css">
When you want another style of font, use font-family, font-weight and font-style properties.
Feel free ask other questions :) Hope this will help you

#font-face with multiple files looks different in Firefox and Chrome

I've css for Custom Arial font face for regular, bold, italic and bold-italic style.
And for that all different font files are created arial_mt_stdregular, arial_mt_stdbold, arial_mt_stditalic and arial_mt_stdbold_italic
#span{
font-family: 'arial_mt_stditalic';
font-style: italic;
font-size: 30px;
}
In Firefox, this apply italic style twice as Chrome and IE.
So my content looks twice italic and twice bold in FireFox than Chrome and IE.
#font-face {
font-family: 'arial_mt_stdregular';
src: url('arialmtstd-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stdbold';
src: url('arialmtstd-bold-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stditalic';
src: url('arialmtstd-italic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stdbold_italic';
src: url('arialmtstd-bolditalic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
sample from FF and Chrome
Why Chrome and IE not applied font-style:italic for "arial_mt_stditalic" font?
I suspect this is browsers trying to simulate italics when you've provided an italic font but told the browser it isn't italic.
When applying the font you have:
font-family: 'arial_mt_stditalic';
font-style: italic;
But in the single #font-face for rial_mt_stditalic you have
font-style: normal;
Ie. you have told the browser to use a non-italic typeface as italic.
All the #font-face definitions should have the same value for font-family, and the other properties then tell the browser what variant, weight, etc. that particular download is.
When you use that font-family the browser matches on the other properties to select the download.
Ie. you should have:
#span{
font-family: 'arial mt';
font-style: italic;
font-size: 30px;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-bold-webfont.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-italic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}
// etc.

use font stored in external css

How do you reference font from a css file? For example, I have css file with the following structure:
fonts.css file
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
}
How do I use this font in other css files?
Here is an example :
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
}
.mystyle {
font-family: "Open Sans";
font-weight: 700;
font-size: 24px;
}
<p class="mystyle">The quick brown fox jumps over the lazy dog</p>
If your want to use it in another CSS file, on your html page you load first the css containing the font faces declaration, then you load the second css using the first one:
<link rel="stylesheet" href="my_font.css">
<link rel="stylesheet" href="my_other_stylesheet_using_it.css">
That way, in the second css you can use the font faces declared in the first css.
You can also import the css containing the font faces declaration into another:
#import url("base.css");
Look at this: include one CSS file in another