I have created an angular 5 project with angular cli. referenced css in angular-cli.json style tag.
"styles": [
"styles.css",
"static/css/custom.css",
"static/css/style.bundle.css",
"static/css/vendors.bundle.css",
"static/css/fullcalendar.bundle.css"
]
when i try to run app in browser. i get font files aborted error in console
GET http://localhost:4200/fonts/font-awesome/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED
fonts/font-awesome/fontawesome-webfont.woff?v=4.7.0:1 GET http://localhost:4200/fonts/font-awesome/fontawesome-webfont.woff?v=4.7.0 net::ERR_ABORTED
fonts/font-awesome/fontawesome-webfont.ttf?v=4.7.0:1 GET http://localhost:4200/fonts/font-awesome/fontawesome-webfont.ttf?v=4.7.0 net::ERR_ABORTED
these font files are being used in vendors.bundle.css
what have i tried:
I tried to change url src: url("fonts/socicon/socicon.eot") to src: url("/fonts/socicon/socicon.eot") in css file.
I tried to load css like this,
<link rel="stylesheet" type="text/css" ref="./static/css/style.bundle.css"/>
but it gave me this error
**because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled**
Angular 2: file not found on local .json file
It seems that the "static" folder not accessible. This previous issue may help.
Related
I am learning server rendering react currently. And I try to convert a product-landing -page Demo to react with express, babel, Webpack.
There are two problems currently after building and running npm start:
index.css cannot link to index.html, the error in console is :The resource from “http://localhost:3100/index.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
the Logo image in /img cannot load to the index.html.
My folder structure is:
...
-client/App.jsx
/client.jsx
-dist/client.js
-img(for images)
-public/index.html
/index.css
-server/index.js
...
The error in console is : The resource from “http://localhost:3100/index.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
My entire code in github:
https://github.com/Jo-Zh/Product-Landing-Page.
Can anyone give me some hint?
Thanks!
my custom font is not working, unless I install it manually in my computer.
//my css file//
#font-face {
font-family:'PROGRESS PERSONAL USE';
src: url('Progress.woff2')format('woff2'),
url('Progress.woff')format('woff'),
url('Progress.ttf') format('ttf');
}
Font family name is correct because, I opened the file font to check the correct spelling and also it shows correctly in the browser if I install the font and use it as:
h1{
font-family: "PROGRESS PERSONAL USE"
}
I thought that the problem was the path of the font files, so I placed them in the same folder and level as the CSS file. I also tried adding a / to the path like url('/Progress.woff2')format('woff2')... in front. Cleared caché, changed browser, and tried in mobile But not working.
Also in my browser inspector/Network shows that the fonts are found when refreshing the browser:
Request URL: http://localhost:8000/Progress.woff2
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin
Would be happy to get help with this!
The self-hosted fonts in Gatsby should be located in the static folder.
So I placed the files in the path:
--> static/fonts/Progress.woff2
-->static/fonts/Progress.woff
-->static/fonts/Progress.ttf
and then in my globalStyles.css which is in my src/ (not in the static folder) I place it like this:
#font-face {
font-family:"PROGRESS PERSONAL USE";
src: url('/fonts/Progress.woff2')format('woff2'),
url('/fonts/Progress.woff')format('woff'),
url('/fonts/Progress.ttf') format('ttf');
}
If you don't have a global css file you can define one for the fonts, and import it in your gatsby-browser.js.
Also there is the option of using the web fonts gatsby pluggin which is explained here
Rails-4
For font face mentioned below,
#font-face {
font-family: "Verdana";src: url(/assets/Verdana.ttf) format("truetype");
}
Location of file is app/assets/fonts (loaded by rails itself)
Now if I have this file in app/assets/fonts/client_4 folder,
I had to add following in application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'fonts', 'client_4')
or
Dir.glob("#{Rails.root}/app/assets/fonts/**/").each do |path|
config.assets.paths << path
end
It worked with font-face url provided as url(/assets/Verdana.ttf), but need to restart server to load application.rb
Query
Case is my font file is uploaded by user and stored in newly created client_x folder present in app/assets/fonts directory.
I want to add asset_path in this case for that client_x folder without restarting server. Please suggest.
Update
I added following in controller whenever directory is created,
MyApplication::Application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts', "client_#{#client.id}/").to_s
And I checked following in page by erb tag,
= puts MyApplication::Application.config.assets.paths.inspect
And I got following output,
[
[ 0] "/home/..../app/assets/fonts",
[ 1] "/home/..../app/assets/images",
[ 2] "/home/..../app/assets/javascripts",
[ 3] "/home/..../app/assets/stylesheets",
[ 4] "/home/..../vendor/assets/javascripts",
.
.
[20] "/home/..../app/assets/fonts/client_164/",
[21] "/home/..../app/assets/fonts/client_163/"
]
20th path is added by application.rb & loaded when server started, I do get font file by asset_url in font-face
21st path is added by controller and & I do not get font file by asset_url in font-face.
I am not getting if I inspect I can see both path in assets , still I do not get asset url for font files inside client_163 added by controller. I want it without restarting server. Please suggest if eagerload or autoload can help.
I could not get exact what I wanted but I found alternative to work with.
I did not add asset path for sub-directories inside app/assets/fonts/.
I worked with complete url like "#{APP_URL}/assets/client_#{client_id}/#{self[file]}"
which produce url like 'http://localhost:3000/assets/client_163/GreatVibes-Regular.otf'
Here APP_URL for development is, 'http://localhost:3000' set in development.rb.
Similarly added for staging & production.
Better to keep variable APP_URL in application.yml (implementing figaro gem) & accessing as "#{ENV[APP_URL]}" (note: add application.yml in .gitignore)
Waiting for better approach.
Update
In staging & production I am getting font applied for not secure https url so, please help.
I use laravel framework. But in chrome console this error happening and font-family not working.
Failed to load resource: the server responded with a status of 500 (Missing Content-Type Header)
In css:
#font-face{
font-family: 'HelveticaNeue';
src: url(../fonts/HelveticaNeue.otf);
}
After searching I found that adding format() can solve problem. and I changed to this :
#font-face{
font-family: 'HelveticaNeue';
src: url(../fonts/HelveticaNeue.otf) format(opentype);
}
Now error not showing in console but font-family still not working.
My file structure is:
public
css
fonts
Thanks.
If you don't get a 404 error for the asset, the issue is probably Chrome not liking the .otf font format.
You can generate a complete set of webfont types using the FontSquirrel Webfont generator: https://www.fontsquirrel.com/tools/webfont-generator
If you do get a 404 error you may need to add the necessary mimetypes for your server to be able to serve the fonts. Check out this little guide for how to enable this for apache or nginx:
https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts
Either way it's always worth having your .ttf and .woff fonts for cross browser compatibility, so definitely generate a complete font kit over at FontSquirrel.
I am trying to set up a website using Jekyll and GitHub Pages (first-timer), and most importantly, to style it with Bootstrap.
You can check what I have already done:
GitHub repository: https://github.com/thibaudclement/wallaby
GitHub page: http://thibaudclement.github.io/wallaby/ (check gh-pages branch)
Also, I followed this tutorial to import Bootstrap into the Jekyll structure.
Layouts and includes seem to work just fine, but I don't understand why my index.html does not get "styled" as it should, fetching information into the css/style.css file.
Any idea of what I am doing wrong?
Thanks.
The path to your css file is incorrect - it's not loading if you check your browser console
"Failed to load resource: the server responded with a status of 404 (Not Found) - http://thibaudclement.github.io/wallaby/style/site.css"
In _config.yml, you need to set baseurl: /wallaby.
And use {{ site.baseurl }} to load resources like this :
<link href="{{ site.baseurl }}/css/style.css" media="screen" rel="stylesheet" type="text/css" />.
See Jekyll documentation.