I've added my fonts as such:
#font-face {
font-family: "NHaasGroteskDSProMedium";
src: url(/fonts/NHaasGroteskDSProM.otf);
}
#font-face {
font-family: "NHaasGroteskDSProBold";
src: url(/fonts/NHaasGroteskDSProB.otf);
}
The folder is well located, as you can see here:
I keep having this error:
Failed to decode downloaded font: http://localhost:3000/fonts/NHaasGroteskDSProM.otf
OTS parsing error: invalid sfntVersion: 1008813135
I'm therefore not able to display the correct fonts when the npm start launches.
Files in the src folder are not directly served by your server. These files are bundled together with the build process first, and any files that are not imported will not end up in the build.
For these types of files, you can place them in the public folder, and the will end up in the build untouched and can be served by your server.
For more info see the CRA page on the public folder
Related
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 have a .NET Core 2.0 app using the Angular 2 Template.
The problem is that I can't add a custom font (woff2) to the app.component.css
#font-face {
font-family: 'FrutigerBold';
src: url("./assets/fonts/frutiger65_bold.woff2") format('woff2');
}
And get the following error:
NodeInvocationException: Prerendering failed because of error: Error: Module parse failed: C:\Users\gbuenrostro\documents\visual studio 2017\Projects\SecurityAngular\SecurityAngular\ClientApp\app\assets\fonts\frutiger65_bold.woff2 Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
Any ideas?
This is the Project:
Don't add the css in your app.component.css.
Create a file.css to include the font (not put then in asset folder) and change the webpack.config.vendor adding the file in nonTreeShakableModules
const nonTreeShakableModules = [
...
'file.css',
...
];
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've started using glyphicons in my meteor project with the twbs:boostrap package. Ever since I started using them I've been receiving the following warnings in my console:
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.woff
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.ttf
OTS parsing error: invalid version tag
What is causing this and how can I suppress these warnings or solve the problem? The glyphicons work perfectly fine, it's just a pain to see the warnings all the time though.
This means that the package you are using to import glyphicons has a bug in it and does not properly declare the font files' locations or does not have the font files properly added to the package itself.
Check the package maintainers issue tracker and in the meantime, download the glyphicons to your public directory and declare them in your own CSS file.
After trying lots of other approaches, and lots of re-installs and checking meteor plus npm configurations, I have just fixed the issue by clearing out browsing data from Chrome (cached images and files) and then refreshing the page.
Serkan Durusoy's answer above worked for me but here is a bit more detail on what I had to do.
Copy the font files from node_modules/bootstrap/dist/fonts to public/fonts
Add this to my main.css:
#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.woff2') format('woff2'), 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');
}
I copied the css from node_modules/bootstrap/dist/css/bootstrap.css and changed the path to match where I'd put the fonts.