I am having an issue in my (vite/vue) project, where some of the fonts are not accessed.
// Console error:
Failed to load resource: the server responded with a status of 404 () roboto regular.woff2:1
I believe it could have something to do with how PostCSS renders the URL when it rebundles the CSS.
//This is how I import the fonts in the project:
#font-face {
font-family: 'Roboto';
src: url(../../../assets/fonts/roboto_regular.woff2) format('woff2'),
url(../../../assets/fonts/roboto_regular.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
//This is how it looks in the bundled CSS
#font-face{font-display:swap;font-family:Roboto;font-style:normal;font-weight:700;src:url(roboto_bold.woff2) format("woff2"),url(roboto_bold.woff) format("woff")}
//This is how I believe it should look in the bundled CSS
#font-face{font-family:Roboto;src:url(/resources/assets/roboto_regular.woff2) format("woff2"),url(/resources/assets/roboto_regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
How can I tweak the config so it renders it like the latter (if that's even the issue)
Thank you in advance.
Related
I'm using some fonts in WordPress and I'm importing them like this
#font-face {
font-family: "Neutra";
src: url("/wp-content/themes/Sunterra/resources/fonts/Neutra-Text-Bold.otf");
}
This worked in my local dev environment but on the live server I'm getting 404 (Not Found)
The live server is not finding the font because of most likely a pathing or permission issue.
Try to use the full url to test. If that doesn't work, you should try to find out where the font is actually located and if it even exists on the live server.
#font-face {
font-family: "Neutra";
src: url("/wp-content/themes/Sunterra/resources/fonts/Neutra-Text-Bold.otf");
}
I think your font path was wrong. make sure your css file was link correctly something like that
#font-face {
font-family: 'iconfont';
src:
url('../fonts/iconfont.ttf?ukrc8w') format('truetype'),
url('../fonts/iconfont.woff?ukrc8w') format('woff'),
url('../fonts/iconfont.svg?ukrc8w#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
font file need to link with your css file
File stracture
-root
-css
-fonts.css
-fonts
-iconfont.ttf
With the node modules i have this file added to my theme. But it is showing in the "Google Pagespeed Insight". Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.
In my CSS file it is import like this.
#font-face {
font-family: 'Graphik Web';
src: local('Graphik Web'), url('#{$spirit-font-path}Graphik-Regular-Web.woff2') format('woff2'),
url('#{$spirit-font-path}Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
But still it is not working as in the report from Google Pagespeed Insight. Please let me know if i think missed anything or to add something.
To get rid of that error, you have to get rid of the #import (which here translates to src url). The #import directive blocks parallel downloads. You have to change the code to import the woff in the main html with a link tag.
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;
}
I am using the below font-face rule in my application
#font-face{
font-family: frutilicn;
src: url('../fonts/FrutigerLTW01-47LightCn.eot');
src: url('../fonts/FrutigerLTW01-47LightCn.ttf') format('truetype');
}
When I access the page the font style does not work . I am getting an error in firebug like this:
"NetworkError: 404 Not Found http://localhost/fonts/FrutigerLTW01-47LightCn.ttf"
The 'font folder' is in the same folder as the stylesheet and FrutigerLTW01-47LightCn.ttf is in the font folder
What does that mean and what do I need to do?
Thanks.
We put our purchased fonts (which we embed onto the website) in the root of the site, therefore avoiding issues with relative linking.
#font-face{
font-family: 'Frutiger';
src: url('/FrutigerLTW01-47LightCn.eot');
src: url('/FrutigerLTW01-47LightCn.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
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