I have done quite a bit of research at this point on the usage of #font-face, and am familiar with some of the challenges, but have nonetheless decided that I wanted to use it for my application. However, for some reason completely unknown to me, the browser is not loading the expected font-face.
I have a CSS file with declarations as follows: Note that the "!important" was me messing around with things, it did not appear to have any effect.
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
font-weight: bolder;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
font-weight: bolder;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
.cerberus-body {
margin: 0;
font-weight: normal !important;
font-family: roboto;
}
Here is a screenshot of the structure of my web:
Web Directory Screenshot
As you can see from the screenshot the src paths on the font-face declarations match up with what I have in my directory, and I have verified they are reachable from my deployed site.
The body elem of my page has the following:
<body class="cerberus-body"></body>
I have verified in dev console that the styles and declaration are working as expected.
Given all of that- here is what I see in the network tab of my dev console when loading my page: (It shows only Roboto-Black and Roboto-Bold getting loaded)
Network tab screenshot
And when I inspect an element on the page I see that the styles piece shows a rendered font of Roboto Black:
Rendered font screenshot
Inspecting the Body on the page I see that my styles are reflected as I would expect, and the css class is getting honored:
CSS inspect screenshot
At this point, I'm really at a loss here. I could use any help or direction on where to go next troubleshooting this. I'm at the point where I think it's likely I'm going to give up on the custom font, but this is a last-ditch attempt to save my dignity.
Given that the fonts don't appear to be loading at all through the network tab, I must be missing something with how the rendering engine determines what font faces to lazy load. Beyond that, I'm at a loss.
Update
After reading through another question supplied in the comments by Pete, I read that some of the commenters recommended changing the order with which the font-face rules are defined. I flipped the order of my rules and sure enough, the font rendered as expected.
I'm hesitant to close the question though, as I have no clue why this works and would like to understand the underlying implementation.
For posterity- my new declarations
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
font-weight: bolder;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
font-weight: bolder;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
font-weight: normal;
font-style: normal;
}
Related
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.
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
I have been trying to use custom fonts
But its not showing on my website.
/*TEXT*/
p.fontcheck {
font-family: MTCORSVA bold;
font-weight: normal;
font-style: normal;
}
/*fonts*/
#font-face {
font-family: "MTCORSVA";
src: url("/eccube_1/html/template/default/css/fonts/MTCORSVA.TTF") format("TTF");
}
<p class="fontcheck">HELLO TEST</p>
I tried URL in whole path too, or by inserting HTTP or HTTPS too.
Results isnt appearing.
My original path to fonts in server is
/public_html/azlily.bex.jp/eccube_1/html/template/default/css/fonts/MTCORSVA.TTF
Try this, this works!
/*TEXT*/
p.fontcheck {
font-family: MTCORSVA bold;
font-weight: normal;
font-style: normal;
}
/*fonts*/
#font-face {
font-family: MTCORSVA;
src: url(http://azlily.bex.jp/eccube_1/html/template/default/css/fonts/MTCORSVA.TTF);
}
<p class="fontcheck">HELLO TEST</p>
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.
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.