Skip to content
This repository has been archived by the owner on Apr 5, 2022. It is now read-only.

Customize fonts/change fonts. #120

Closed
SamuelWorkman opened this issue Mar 3, 2020 · 12 comments · Fixed by #123
Closed

Customize fonts/change fonts. #120

SamuelWorkman opened this issue Mar 3, 2020 · 12 comments · Fixed by #123
Labels
Status: Available Type: Bug

Comments

@SamuelWorkman
Copy link

I really love the revamp and am keen on building my site with the theme. I am a statistician, and so require a lot of different types of fonts for various things I'd like to post on my blog.

I have been unable to change the default fonts in any of the ways that seem prescribed for hugo themes generally or for the older hugo-future-imperfect theme. I was wondering if someone could provide me with a general course of action. No matter which approach I use, it seems the theme overrides my choices to return to the default fonts. Here is what I've tried so far:

  1. Create static/fonts and place the font files from google fonts helper in there. Create static/css/fonts and place custom fonts.css in there. This doesn't seem to override the default fonts. the fonts.css is as follows:

/* fira-sans-regular - latin /
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/fira-sans-v10-latin-regular.eot'); / IE9 Compat Modes /
src: local('Fira Sans Regular'), local('FiraSans-Regular'),
url('../fonts/fira-sans-v10-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('../fonts/fira-sans-v10-latin-regular.woff2') format('woff2'), / Super Modern Browsers /
url('../fonts/fira-sans-v10-latin-regular.woff') format('woff'), / Modern Browsers /
url('../fonts/fira-sans-v10-latin-regular.ttf') format('truetype'), / Safari, Android, iOS /
url('../fonts/fira-sans-v10-latin-regular.svg#FiraSans') format('svg'); / Legacy iOS */
}

body {
font-family: 'Fira Sans', sans-serif;
}

  1. I have also tried change the font specifications in main.scss in the theme.

  2. I have NOT changed any of the html, if that matters - if so, would I need to adjust in-theme or only at my project root?

Neither seem to alter the fonts. I am on a Windows 10 machine, if that matters. No error messages or anything associated with the code, it just doesn't change anything. Sorry if I am missing something, but would really love to use the theme and this is the only hangup.
@pacollins
Copy link
Owner

pacollins commented Mar 3, 2020 •
edited
Loading

For this theme, you will need to define your styles in assets/css/add-on.css Then in the config for cssFiles you could use ["default","LINK-TO-CDN"] if you wanted CDN, or a direct link to the file in static/css - though I am not sure how font load order works. You might try flipping to ["LINK-TO-FONT", "default"]. This should put your font above the rest of the style files.

@SamuelWorkman
Copy link
Author

SamuelWorkman commented Mar 3, 2020 via email

@SamuelWorkman
Copy link
Author

I have now tried these methods above with no success. I modified 'add-on.css' as follows:

/*
This css file is for individual users to restyle items for their personal site,
or for the implementation of features specifically for their site. Anything that
is an official part of the theme (ex. Pull Requests) should be included in main.css
and follow the formatting and style given.
*/

/* philosopher-regular - latin /
@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: 400;
src: url('philosopher-v12-latin-regular.eot'); / IE9 Compat Modes /
src: local('Philosopher Regular'), local('Philosopher-Regular'),
url('philosopher-v12-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('philosopher-v12-latin-regular.woff2') format('woff2'), / Super Modern Browsers /
url('philosopher-v12-latin-regular.woff') format('woff'), / Modern Browsers /
url('philosopher-v12-latin-regular.ttf') format('truetype'), / Safari, Android, iOS /
url('philosopher-v12-latin-regular.svg#Philosopher') format('svg'); / Legacy iOS */
}

body {
font-family: 'Philosopher', sans-serif;
}

The documentation for cssFiles says that ["default"] includes add-on.css. But, it almost seems as if it is being ignored when building the site. I next tried to place alternate css and the font files directly in static/fonts/ and hardcode them at cssFiles in both orders, but that is not recognized either.

I then got rid of this code, and cleaned everything up and simply added

`h1{
color: #ff000;
}

body {
background-color: black;
}`

Which I think should have altered the colors of the h1 headings and the background (though css isn't my wheelhouse). And again, nothing changes. I'm wondering if the config, is actually referencing add-on.css. And, for some reason, is unable to accept the hard-coded approach. That's what I have so far on this.

I also included multiple versions of the relative path, including placing the font files in assets/css/ with add-on.css. Still no luck. Its also not throwing an error message (using blogdown and Rstudio), which could mean add-on.css isn't incorporated. Just not sure.

I'll keep working on it.

@SamuelWorkman
Copy link
Author

After a pretty long week, I have finally found the solution. The following worked for me:

  1. Realize that main.css is actually main.scss. This meant that add-on.css actually had to be add-on.scss.
  2. So I created add-on.scss. I first tried placing this file in the same folder as assets/css/add-on.css, but that failed.
  3. I placed my add-on.scss in static/fonts/, along with my font files.
  4. I changed config.toml variable to cssFiles = ["default","/fonts/add-on.scss"]. Note that my custom file had to be placed AFTER "default" to override the theme's settings.

This worked for me. I notice that the html points at add-on.css and this may be the source of the theme ignoring assets/css/add-on.css - wondering if it should be assets/add-on.scss. Note that assets/css/add-on.css failed not only to change faults but background colors and simpler .css styling as well. So, I'm not sure the theme is, consistently, acknowledging assets/css/add-on.css.

I may do a bit more work to see if altering the partials to reflect this makes assets/css/add-on.scss work, and will update.

Sorry for the long post, but I'm particularly about fonts and others may be as well.

@rfc2119
Copy link

rfc2119 commented Mar 12, 2020 •
edited
Loading

@SamuelWorkman your instructions were indeed helpful. I'm trying to achieve exactly the same goal. Can you please post a snippet of your add-on.scss file ?
EDIT:
I have followed your steps but getting into walls, namely (in chrome):

Refused to apply style from 'https://my_web_site/fonts/add-on.scss' because its MIME type ('application/octet-stream') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

on Firefox (>40):

The resource from “https://my_web_site/fonts/add-on.scss” was blocked due to MIME type (“application/octet-stream”) mismatch (X-Content-Type-Options: nosniff). Learn More

@pacollins
Copy link
Owner

The actual issue, now that I have had time to look, is that the directory of add-on.css and what is called from the theme do not match through my error.

hugo-future-imperfect-slim/layouts/partials/head.html

Line 20 in 506e066

<link rel="stylesheet" href="{{ "css/add-on.css" | relURL }}">

hugo-future-imperfect-slim/layouts/partials/head.html

Line 39 in 506e066

<link rel="stylesheet" href="{{ "css/add-on.css" | relURL }}">

Both of these lines are calling static/css/add-on.css but should be calling assets/css/add-on.css; however, we opted to not use Hugo Asset Pipes for add-on.css, so add-on.css needs to be moved to static/css/add-on.css and it should solve your issues.

@SamuelWorkman
Copy link
Author

Hi Patrick,

Thanks for finding the time to look into this. The work-around I described above worked for me. I'll give your fix a try in the next day or so. I had a hunch that the issue was something like that given all my trial-and-error. I just wasn't savvy enough in CSS/HTML to fix it (I modified those paths several times but pointed them at the wrong folder.)

BTW, if you need examples of the site in operation, check out samuelworkman.org.

Thanks again! Once I test your solution, I'll comment back and maybe we can close this issue.

@SamuelWorkman
Copy link
Author

@rfc2119 try Patrick's solution first. Would rather have a solution for you that is "in-theme".

I have a hunch that you may not have the appropriate webfont files - get the from google webfont helper, rather than the google fonts page. The helper provides files that are adapted to all platforms as best possible. You have to copy ALL of the files it gives you into the fonts directory you are using.

You can see my css by going over to SamuelWorkman/samuelworkman and taking a look in static/fonts/, where you'll find my font files and fonts.css. Feel free to copy what you need.

@SamuelWorkman your instructions were indeed helpful. I'm trying to achieve exactly the same goal. Can you please post a snippet of your add-on.scss file ?
EDIT:
I have followed your steps but getting into walls, namely (in chrome):

Refused to apply style from 'https://my_web_site/fonts/add-on.scss' because its MIME type ('application/octet-stream') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

on Firefox (>40):

The resource from “https://my_web_site/fonts/add-on.scss” was blocked due to MIME type (“application/octet-stream”) mismatch (X-Content-Type-Options: nosniff). Learn More

@pacollins pacollins mentioned this issue Mar 13, 2020
Merged
7 tasks
@pacollins
Copy link
Owner

@rfc2119 and @SamuelWorkman - When you both have the chance, can you try my simple fix and ensure it is working, then comment on the PR? Thanks!

@rfc2119
Copy link

rfc2119 commented Mar 13, 2020 •
edited
Loading

@rfc2119 and @SamuelWorkman - When you both have the chance, can you try my simple fix and ensure it is working, then comment on the PR? Thanks!

Thanks, that fixed it! I left a comment on the PR. Kudos to @SamuelWorkman for opening the issue and persisting till the end 👍

One thing before we close this issue: I wanted to include some language-specific CSS or HTML, namely the direction property for CSS or the dir HTML attribute. This is because my language is written right to left (rtl).

Within add-on.css, I tried including the direction css property but it didn't function (it's there in my site's css, but it doesn't work). Hence, I do not know what is the best approach to solve this. Do you think this merit a new issue ?

EDITED: if the PR isn't merged yet, @SamuelWorkman don't forget to checkout the fix branch first: git checkout fix-addon-path

@SamuelWorkman
Copy link
Author

Pull request #123 fixes this bug. Issue is now closed.

@pacollins
Copy link
Owner

pacollins commented Mar 13, 2020 •
edited
Loading

@rfc2119 Go ahead and open another issue. I am wondering if we could do this with i18n for your particular language.

@rfc2119 rfc2119 mentioned this issue Mar 19, 2020
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Status: Available Type: Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Adjust exampleSite directories pacollins/hugo-future-imperfect-slim
3 participants
@rfc2119 @pacollins @SamuelWorkman