I'm trying to add a font to an angular application without much success. I created the font in Adobe Illustrator and converted it to a font using an online web conversion. The font is working in the demo file they sent back so I'm sure that the font works.
However, when Webpack compiles the angular application I get an error that says CssSyntaxError. the full error is:
ERROR in ./src/app/icons/poker-fonts/style.scss (./node_modules/#angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/app/icons/poker-fonts/style.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\James\source\repos\range-analizer\src\app\icons\poker-fonts\style.scss:4:2: Can't resolve 'fonts/pokericon.woff' in 'C:\Users\James\source\repos\range-analizer\src\app\icons\poker-fonts'
and I cannot figure this out.
this is the part that it's failing on:
#font-face {
font-family: 'pokericon';
src: url('fonts/pokericon.eot');
src: url('fonts/pokericon.eot') format('embedded-opentype'),
url('fonts/pokericon.ttf') format('truetype'),
url('fonts/pokericon.woff') format('woff'),
url('fonts/pokericon.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
Related
I am running Homer (bastienwirtz/homer) in a docker and have created a dedicated custom.css file to change the appearance. The Custom.css file is properly loaded and so are all the custom css changes.
I am trying to import custom fonts with:
font-family: 'Azo';
font-style: normal;
font-weight: 400;
src: url('./fonts/AzoSans-Regular.ttf') format('truetype'),
src: local(''),
url('./fonts/AzoSans-Regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/AzoSans-Regular.woff2') format('woff2'),
url('./fonts/AzoSans-Regular.woff') format('woff'),
with the font files being properly stored in the given locations. The CSS calls for the fonts are properly made but it seems to not load the .ttf as a resource. Instead, the browser just falls back on the fallback-font?
Honestly do not even know where to start so I appreciate any input pushing me in the right direction!! :)
There are two fonts that, although they are appearing on the site just fine, are producing errors in DevTools.
#font-face {
font-family: Impact;
src: url(../fonts/impact-webfont.eot);
src: url(../fonts/impact-webfont.eot?#iefix) format('embedded-opentype'),
url(../fonts/impact-webfont.woff) format('woff'),
url(../fonts/impact-webfont.ttf) format('truetype'),
url(../fonts/impact-webfont.svg#impactregular) format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: kmi-genericons;
src: url(../fonts/kmi-genericons.eot?70543738);
src: url(../fonts/kmi-genericons.eot?70543738#iefix)
format('embedded-opentype'),
url(../fonts/kmi-genericons.woff2?70543738) format('woff2'),
url(../fonts/kmi-genericons.woff?70543738) format('woff'),
url(../fonts/kmi-genericons.ttf?70543738) format('truetype'),
url(../fonts/kmi-genericons.svg?70543738#kmi-genericons) format('svg');
font-weight: 400;
font-style: normal;
}
The paths in the console errors are incorrect. The CSS snippet above is found in /wp-content/themes/kmi/css/compiles.min.css. Since the path is relative, it should be loading from /wp-content/themes/kmi/fonts/. The network tab shows it's recognizing the correct path as well:
So it's like there are 2 requests for the same font: one at the correct relative path, and one at an incorrect root path. Why would this be?
Turns out, Nehemiah was correct in his comment on my question. This CSS was being inserted via JavaScript through a plugin (Above the Fold Optimization), which I didn't realize, in addition to being called from a regular <link> tag. Thus, it was loading twice, and the relative path did not resolve when inserted via JavaScript.
Sorry for missing this - thank you!
The below code doesn't make a call to download the file. I am using this within a Node.js and Express framework.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../../fonts/glyphicons-halflings-regular.eot');
src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
The above code should be downloading glyphicon font in the browser, but it doesn't do so. In the developer toolbar of Chrome and Firefox I don't see any call being made to the specified URL.
Could someone please explain why
font file doesn't get loaded until use them.
I was trying to load glyphicon font but i was not using them in my html. Hence it wasn't loaded.
**My code**
#font-face {
font-family: 'certificateitalic';
src: url('/webfontkit-20140113-085051/certificateitalic-webfont.eot');
src: url('/webfontkit-20140113-085051/certificateitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('/webfontkit-20140113-085051/certificateitalic-webfont.woff') format('woff'),
url('/webfontkit-20140113-085051/certificateitalic-webfont.ttf') format('truetype'),
url('/webfontkit-20140113-085051/certificateitalic-webfont.svg#certificateitalic') format('svg');
font-weight: normal;
font-style: normal;
}
this is the code which is used in generatecertificate.html.erb
Maybe its not just the fonts, check that when you create the pdf, you are receiving all the assets you need.
Las time i checked i had to use a helper provided by wkhtmltopdf called wkhtmltopdf_stylesheet_link_tag instead of the classic stylesheet_link_tag that you should have in your view/partial/layout.
EDIT: Actually, im using wicked_pdf gem (https://github.com/mileszs/wicked_pdf), and there you have helpers like wicked_pdf_stylesset_link_tag, and solve most of the configuration of wkhtmltopdf config.
If you follow the configuration as explained there, and your font face is working correctly on the webpage, it shouldn't have any troubles in pdf generation.
I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS