How do I override the custom font in the Hugo book theme? - hugo

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

Related

react-slick carousel CSS, "Failed to compile" error

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.

Unable to import sass variables from one scss file to another

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.

Misbehaving woff file - one font loads, the other doesn't

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.

CakePHP AssetCompress plugin and fonts

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.

Why the 404 error in my ttf font?

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.

Resources