-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Angular CLI is modifying the paths to fonts set in @font-face to point to the root directory in a production build #6599
Comments
There are two pipelines happening:
So in your case you don't need to put those fonts in assets. Put them anywhere and the build system will recognize them. |
Thank you @filipesilva for the clarification but I wonder what the preferred way would be?! Should I put my fonts in another folder (like 'resources') which will not be copied by default or should I put my files in the assets folder and reference them in scss with '/assets/...' instead of '../assets/...'? |
Personally, I try to put images/fonts next to the components that use them and reference them from css. But if there's an image I need to load from html I put it in assets. |
@filipesilva I have some issue. I have put font directory in under src directory but it is doesn't resolved |
Same issue occurs. Any solution yet? |
same here. this should be reopened. |
yes this should be opened ,it clutters the root directory |
Agree. I have a lot of embedded fonts and 3 versions of each, so the root directory is a mess. Please re-open the issue. |
We have the exact same issue. The problem is that when you build the app with multiple languages as AOT, the paths to the fonts are incorrect. Angular references the font files like so: http://127.0.0.1/enrawline-100.woff Which results in a 404. The correct path should be: http://127.0.0.1/en/rawline-100.woff That happens when we define a
If we refer to them like this instead:
The path it tries to load them from is: http://127.0.0.1:8081/en/en/assets/fonts/rawline-200.woff2 This issue should either be reopened or clarified how to properly include local fonts. @filipesilva The font we're using are used in every component, and that's why I really don't want to use your provided solution, as this seems to add quite a lot of duplicates. But I don't understand why it's expected behavior. How are you expected to import a local font then? |
I am using SCSS and got it to work by placing 2 folders in the src directory one is a theme folder with my styles and a fonts folder with my fonts, then I added a styles.scss in the src directory and loaded in all my styles and for my @font-face I created a variable that point to my fonts that gets prepossessed at build time thus I get my fonts in the root dist directory and not duplicate in assets, also it works in dev time with ng serve. here is my code in the styles.scss:
and in my _fonts.scss
|
My problem is the URL to the font is rewritten incorrectly when there's a hashtag involves in the URL. The url becomes invalid. |
@filipesilva Is there any solution or any flag which can be use while building so that fonts are not added in root directory ? |
Same here, any solution to prevent to have a lot of stuff inside root folder? |
@attrox One way to solve this issue, if you still face it is as follows: 1 - Create a new file fonts.scss in your local /fonts directory containing the path to the fonts: $breuer-text-regular-font-path: "/fonts/breuer-text/opentype-ttf/BreuerText-Regular.ttf"; 2 - Import your fonts.scss into your styles.scss and use the variables: @import "../fonts/fonts.scss"; @font-face { @font-face { Otherwise, use a CDN and load your fonts from there. |
Why is this issue closed and ignored? Please kindly fix this. It is too messy of a solution right now. |
I had the same issue, but can fix it by using absolute path instead of relative one for fonts. Like this:
It works for dev and production build now. |
@ogousa Thanks. It works for images as well. |
@rafa-as, I have
I think it should work if you have
BTW, if you have only Latin languages, you can use one font for all of them, just use Latin-Ext charset. |
@ogousa great job. 🥇 |
👎 this solution doesn't work for me, since the CSS I'm using in on the other domain, in case I'm using absolute path it's trying to load the file from the main domain. |
This is a problem indeed We cannot use absolute paths either (as mentioned, while this may work for some, this "solution" s*cks a bit) |
@filipesilva , please in next update try to give us a way to change default path of linked in css/less/sass asset(not into dist/) in angular.json or other configuration file.. |
I am using several webfonts installed with npm. They are referenced directly in the node_modules folder in my angular.json file. Unless this is fixed in the CLI, I'd have to manually edit all these CSS files inside node_modules to use absolute paths, which is not a good idea of course, because I'd have to do it again in every npm install. Ideally, I should have a script that modifies these files automatically before they are compiled, but I have no clue how to do this. I assume it will require a custom webpack config with a plugin/loader to do it? |
link to issue and temporary workaround: angular/angular-cli#6599
@QuipHop "files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/*.jpeg", // added
"/*.woff2", // added
"/*.svg", // added
"/*.ttf", // added
"/*.eot" // added
] Because all the files referenced in the css or scss are imported from the source to the root. |
Re-open this issue |
Since we are originally using .sass, I had to create Using _fonts.sass will throw an error |
When deploying as "Angular Elements" we have this issue where every custom angular element has their own "assets" folder with a "fonts" folder. We have for example one element that is running on http://localhost:4004 and another "parent" that uses this custom element running on http://localhost:4200 This method works fine in the element that is running on http://localhost:4004: styles.scss But when using the custom element in the "parent" running on http://localhost:4200 i get these errors:
It seems like when we package angular components as custom elements (angular elements) we have this issue. Any suggestions for nifty hacks to get custom fonts working in angular elements? 😶 |
This issue has been closed, but I still have problem: |
@filipesilva I'm having the same issue with this for images referenced using css url, it works fine until I try to run a universal build, a flag to prevent this kind of hashing would be much appreciated, would save hours of work :\ |
Hi all, this is a pretty old issue that started with a simple report and then accumulated a lot of other reports. Some of these others reports are directly related to the original issue, and for others the only relation is that the problem also involves resources in CSS. I understand the distinction isn't obvious, and often it's not clear until it's investigated for a while. But either way reporting things on an old closed issue isn't the best way of getting them addressed. It's better to open a new issue with all details necessary, like version numbers and a minimal reproduction. This way it's crystal clear what the issue is, and and anyone can try to fix it. If you've commented on this issue and are still having problems with the way Angular CLI processes CSS resources, please open a new issue and fill in the details requested in the issue template. |
If your fonts are not working use Worked for me
|
@elron I actually had to change from Example:
I'm running the following versions: Angular: 8.2.0 |
The issue with this is that it doesn't work when dealing with i18n, because you are using different base-href for each language. Absolute paths do not work when referenced from css files. |
I found a temporal workaround for my Angular/Electron app: If I use absolute import ( So I moved @font-face in index.html, the relative import ( |
To make things worse, before version 8, |
@ogousa I have given absolute patch in my project
It should work but it did not work now i am getting error at the time of deploy. Because lets say my production IP is 192.168.2.38 project name is AngularProject and fonts are in Assets/Fonts folder but when i build and deploy this then it is giving me error that "open-sans-v15-latin-300.woff2" is not found on this location 192.168.2.38/assets/Fonts/open-sans-v15-latin-300.woff2 but actually its on this location - |
@ogousa can you please provide a solution? |
With Angular 8 we have the same problem again :( For production build you can use this command:
where aaa is the base url. You have to add new script "web.js" to scripts folder (scripts folder is on the same level as src).
This is the content of web.js:
This code simply replaces all occurrence of absolute path /assets/fonts with relative path ./assets/fonts in resulting style file inside dist folder. It should work until Angular team fix this issue :) |
Thank you @ogousa. Is there any reported issue so that I can follow that issue directly. |
don't use dots for relative path here, just use as url('/assets/abc.woff2'). It doesn't point to that file when pressing "ctrl + click", but it removes the duplicate files created in the root dist folder. eg : ('../fonts/abc') to ('/fonts/abc') |
on angular 8.0.2 adding "production": {
"deployUrl": "./path/to/prod/files/", in angular.json solved the problem for me |
@UsarodnaKuze could you clarify this? thank you so much! |
@Sathyaraj06: If I take the dot away, it takes the wrong path.
then in production: For info,
Workaround for me is:
Then it works. |
Yes, it really works! for fonts: for images: Everything works fine for external server and for localhost. Thank you, Willyisback! |
@Willyisback thank you very much. It works like a charm. Would you mind to explain why the usage of the tilde is working here... I am really excited to understand it :) |
This works! thanks man |
@alxshell |
why does this is still closed? Dist folder has duplicate of assets and it has bigger size. Is there a way to prevent copy to root folder files are already exist here into specific folders (like fonts, img, etc.) here is explanation:
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug Report or Feature Request (mark with an
x
)Versions.
Repro steps.
ng new testapp --style scss
Then created new directory in
./src/assets/fonts/
which includes a set of custom font files likeGibson-Light-webfont.eot
for example.Then in my
styles.scss
file i reference those fonts like this:Then i run
ng build --prod
In my
./dist
directory, the build process correctly copies my fonts to./dist/assets/fonts/*
as expected, but it also included duplicates of all of my fonts right in the root of my./dist
directory which i did not expect and the paths set in @font-face url's are changed to point to the root.The log given by the failure.
No errors are output.
Desired functionality.
That the production build only copy my fonts to the
./dist/assets/fonts
directory and not modify the paths in @font-face urls.The text was updated successfully, but these errors were encountered: