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?
