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.
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
In my React app, I have a file called _variables.scss with the following code. It contains variables that I want to use in all my .scss files:
$navy: #264653;
$green: #2A9D8F;
$yellow: #E9C46A;
$orange: #F4A261;
$red: #E76F51;
$title-font: "Arial Rounded MT Bold", sans-serif;
$text-font: "Raleway", sans-serif;
I want to use the variables in another .scss file. This is my code in the other file:
#use './design/variables' as v;
* {
font-family: v.$text-font;
}
However, instead of recognizing the variable, my React app returns the following error:
I have already checked that the path of the file is the correct one.
How can I fix this error?
I am assuming you are using Node-Sass as most are. #use is only supported by Dart-Sass yet and probably forever. The announcement that #import would be depricated was made 5 years ago.
I tried with following explanation in vue 2.5 it does not work. But in version vue 2.4.2 working fine.
"Real" Static Assets
In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining build.assetsPublicPath and build.assetsSubDirectory in config.js.
As an example, with the following default values:
// config/index.js
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
Any file placed in static/ should be referenced using the absolute URL /static/[filename]. If you change assetSubDirectory to assets, then these URLs will need to be changed to /assets/[filename].
Any suggestion for vue 2.5.2 ?
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.
I'm working in CakePHP 3.4.
I have an image outside img directory, in files directory under webroot
I have a files directory inside webroot along with css, img, js.
I tried using it like
$this->Html->image(WWW_ROOT . 'files' . DS . 'myimage.jpg')
which is creating path as
/var/www/html/myproject/webroot/files/myimage.jpg
But this is not showing image. Copying and pasting path in another tab is loading image perfectly. Also, moving image file to img directory and using $this->Html->image('myimage.jpg') is working fine.
Why it is not working ? Also, It is easy to build url for directories css, img and js like
// Outputs http://example.com/img/icon.png
$this->Url->image('icon.png', true);
OR
// Outputs /img/icon.png
$this->Url->image('icon.png');
which will result as
http://example.com/img/icon.png
I want to build url for files directory like
http://example.com/files/myfile.jpg
OR
// /files/myfile.jpg
How to build url for directories other than img, css and js.?
I'd doubt that using that path as a URL will work, as it's a filesystem path, and that's where the problem is. HtmlHelper::image() only supports URLs, relative as well as abolute ones (I guess the docs on this could be improved).
By default relative paths are expected to be relative to the /img/ folder. In your case you could pass a (web)root-relative path, like:
/files/myimage.jpg
If you want to generate an absolute URL, use the fullBase option:
$this->Html->image('/files/myimage.jpg', ['fullBase' => true])
See also
Cookbook > Views > Helpers > Html > Linking to Images