I'm building a website that uses two purchased fonts, both .woff. One loads correctly, the other doesn't, and the console logs an error 'File not found'.
A quick Google suggested this might be the solution: Why is #font-face throwing a 404 error on woff files?
However, if this was the case, surely the other woff file wouldn't load either? What on earth is going on? The first font works, the second does not.
#font-face {
font-family: UnitSlabBlack;
src: local('☺'), url("/fonts/UnitSlabWeb-Black.eot");
}
#font-face {
font-family: UnitSlabBlack;
src: url("/fonts/UnitSlabWeb-Black.woff") format("woff");
}
#font-face {
font-family: UnitSlabLight;
src: url("/fonts/UnitSlabWeb-Light.eot");
}
#font-face {
font-family: UnitSlabLight;
src: url("fonts/UnitSlabWeb-Light.woff") format("woff");
}
You could check your path - one difference I see is that one reference begins with a forward slash and the other one doesn't.
Related
So I am building a site with the hugo-book theme. The docs here (under Extra Customization) say to create scss files under ./assets, while the theme submodule itself stores its css defaults under ./theme/hugo-book/assets.
Following this logic I created an scss file at ./assets/_fonts.scss:
/* merriweather-regular - latin */
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: local(''),
url('fonts/merriweather-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/merriweather-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-italic - latin */
#font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
src: local(''),
url('fonts/merriweather-v28-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/merriweather-v28-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: 'Merriweather', sans-serif;
}
but hugo is still picking up the default roboto font from the theme directory. The fonts are stored under ./static/fonts and the hugo compiler seems to be picking up the changes.
Should I instead be making changes to the hugo-theme submodule and not worrying about it? That doesn't seem right. Searching the internet shows references to a custom_css params entry in config.toml but it would be pointing to ./assets - is this not the default?
Asking here before I ask the hugo-book author, in case I am missing something simple.
You have to create an assets folder from the root of your theme. This assets folder should not be inside any other folder.
For the fonts, create a folder by the name of static and inside of that create another one by the name of fonts and put your web fonts inside of it.
For the fonts to work, paste the font stylesheet into _custom.scss partial and change the URL path there. After that these should work without any issues.
Note: the static folder shouldn't be inside another folder.
assets
_custom.scss
static/fonts
webfonts.woff
I'm having an issue with my react-slick carousel. I'm following official documentation and installation steps but I'm getting this error:
It seems to be a very common error, and I've tried solution which I've found here on stackoverflow - delete this block of code from slick-theme.scss.
/* Slider */
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
/* Icons */
#if $slick-font-family == "slick" {
#font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
Firstly, it doesn't help, but after 5 minutes of trying to find another solution it magically starts working and now, after 10 minutes of trying to configure it, stylize it and add content to slides, this error fires again.
Does anybody please have solution for this? Or maybe some advice for different React carousel which is not as buggy as this one? Even if it starts working for 10 minutes, some features didn't work, for example, dots, the were no arrows for switching slides, etc.
Thanks for any help.
I am using AngularJs ui-grid http://ui-grid.info/.
While implementing, I get something which you can see in the following img in right corner of the cell instead of dropdown symbols.
Which files to include to solve this bug?
You need to download the font files:
ui-grid.woff
ui-grid.eot
ui-grid.svg
ui-grid.ttf
from here. And move them where your ui-grid.min.css lives.
Please include ui-grid CSS file by this way
<link rel="stylesheet" href="/release/ui-grid-unstable.css">
and ommit the script tag from the Authors Tutorial or Api
<script src="/release/ui-grid-unstable.css"></script>
for eg (http://ui-grid.info/docs/#/tutorial/102_sorting)
I would just like to add this answer (stolen verbatim from panciz) for the folks using Grunt who would like to have these automatically copied. This needs to be placed in your Gruntfile.js:
copy: {
dist: {
files: [
...
//font di ui grid
{
expand: true,
flatten: true,
dest: 'dist/styles/',
src: ['bower_components/angular-ui-grid/ui-grid.ttf',
'bower_components/angular-ui-grid/ui-grid.woff',
'bower_components/angular-ui-grid/ui-grid.eot',
'bower_components/angular-ui-grid/ui-grid.svg'
]
}
]},
You may also want to look at a recently added tutorial: http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation
This covers how to install the fonts correctly, and a little bit of trouble shooting.
Another way to solve the issue is modify the CSS class as follows
.ui-grid-icon-down-dir:before {
content: '\25bc';
}
.ui-grid-icon-up-dir:before {
content: '\25b2';
}
.ui-grid-selection-row-header-buttons.ui-grid-row-selected:before{
content:'\2714' !important;
}
.ui-grid-all-selected:before{
content:'\2714' !important;
}
Try to include in your project :
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
If you are using gulp, add this task.
gulp.task('styles', function() {
// Copy font files needed for angular-ui-grid
gulp.src(['bower_components/angular-ui-grid/ui-grid.ttf',
'bower_components/angular-ui-grid/ui-grid.woff',
'bower_components/angular-ui-grid/ui-grid.eot',
'bower_components/angular-ui-grid/ui-grid.svg'
])
.pipe(gulp.dest('dist/styles/'))
// Other style tasks here
});
{
expand: true,
cwd: 'bower_components/angular-ui-grid',
src: ['.eot', '.svg', '.ttf', '.woff'],
dest: '<%= yeoman.dist %>/styles'
}
add this code to grunt file at copy: {
dist: {
If you use ui-grid - v4.6.6, you need to put ui-grid.ttf and ui-grid.woff into folder fonts. So the structure of directory will looks like this:
ui-grid.min.css
fonts # <-- this is a folder
ui-grid.ttf # <-- in fonts folder
ui-grid.woff # <-- in fonts folder
Adding this answer to hopefully save someone a headache. I had this problem and went through all the steps I could find. However, the problem wasn't file location, etc, my issue is the .woff file was corrupted. I downloaded the fonts to my local machine and ftp'd them to the server. Unfortunately, the .woff on the server ended up in a bad state and was bombing the #font-face declaration. Although this particular problem doesn't mention any console warnings/errors, they will match issues resolved by adding the fonts to grunt/gulp/etc.
I don't recall the error in Chrome, but in Firefox it was:
downloadable font: rejected by sanitizer
So, if you've gone through the hoops and nothing seems to work, check if the font files are correct because my FTP failed for .woff and it resulted in the same Korean characters, etc.
I have a custom font imported into CSS with #font-face, which worked fine. When trying to use Mark Story's AssetCompress plugin, I included the CSS file in the .ini file. While the font works (for now, but it may be cached), I get an error.
Snippet of CSS file (the font directory is in the css directory):
...
#font-face {
font-family: 'ArvoRegular';
src: url('font/arvo-regular-webfont.eot');
src: url('font/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/arvo-regular-webfont.woff') format('woff'),
url('font/arvo-regular-webfont.ttf') format('truetype'),
url('font/arvo-regular-webfont.svg#ArvoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
...
Console error (Chrome):
GET http://localhost/.../cache_css/font/arvo-bold-webfont.woff 404 (Not Found)
Why is this error occurring and how to I get rid of it? Also, I get a CakePHP NotFoundException when visiting that URL in the browser, which is why I think the font is working from cache now.
Edit
The full (real) path is: http://localhost/_active/website-under-development/css/font/arvo-regular-webfont.eot and the homepage is at http://localhost/_active/website-under-development/
The directory structure for the webroot is:
/webroot/
|--css/
|----font/
|------arvo-regular-webfont.eot
|------other font files...
|----main.css
|----other CSS files...
Make urls relative to the webroot
The default configuration for the asset compress plugin has the cache folders at the same level as the source folders:
[General]
cacheConfig = false
[js]
cachePath = WEBROOT/cache_js/
[css]
cachePath = WEBROOT/cache_css/
Therefore the folder structure is as follows:
app
webroot
cache_css
cache_js
css
js
img
Instead of defining urls relative to the location of the file - define them relative to the webroot:
/* /css/some.css */
#font-face {
font-family: 'ArvoRegular';
src: url('../css/font/arvo-regular-webfont.eot');
/* /css/some/other.css */
#font-face {
font-family: 'ArvoRegular';
src: url('../../css/font/arvo-regular-webfont.eot');
This permits font files/images in css files to be found however they are accessed. I.e. All of the following css files would find the right font files:
http://localhost/myproject/css/some.css
http://localhost/myproject/css_cache/123123.css
http://localhost/myclient/myproject/css/some.css
http://localhost/myclient/myproject/css_cache/123123.css
http://myproject.dev/css/some.css
http://myproject.dev/css_cache/123123.css
http://cdn.myproject.com/version123/css_cache/123123.css
You need to be careful with relativly linked assets. If its images or fonts.
The paths wont match after compressing and storing those files in a different location ("cache_css" folder in your case).
So always link your assets relative to root (not the current file) to avoid this.
From root (for http://www.domain.de/ it's / - the part after the domain) it will always be accessible with the same url, thus always be reachable, no matter where the final compressed css will be located at.
// if the file is in WEBROOT/css/font/
url('/css/font/arvo-regular-webfont.svg#ArvoRegular')
PS: and try to avoid those localhost setups. use vhosts and a local url like "my.website.local" etc.
On my site, I use SASS
I have the following code:
--- Edit ---
#font-face {
font-family: 'BauhausBold';
src: url('/Type/bauhaus_bold.eot');
src: url('/Type/bauhaus_bold.eot?#iefix') format('embedded-opentype'),
url('/Type/bauhaus_bold.woff') format('woff'),
url('/Type/bauhaus_bold.ttf') format('truetype'),
url('/Type/bauhaus_bold.svg#BauhausBold') format('svg');
font-weight: normal;
font-style: normal;
}
To use this font:
font-family: quote('bind'), arial;
But we always get the error 404 on my site. See the image:
Full image: http://i.stack.imgur.com/jAhWY.png
You can access the site: bindsolution.com if they wish.
Thank you all for your help!
I've just had exactly same problem and I couldn't solve it. I thought it was due to relative path but it wasn't. It turned out that I had my fonts names in CSS in uppercase while the files' names were actualy lower case. Previous server didn't care but this one does. That is all.