Setting a new primary font-family with Bulma

Asked 24/10, 2020 at 11:39 Answered 16/1, 2023 at 13:18

I'm trying to update the variable for the primary font-family in Bulma but nothing seems to be happening. So far, what I've done is:

Import the initial variables and functions file.
Import the fonts I would like with Google Fonts
Set a new variable called $family-serif: "Grandstander", serif;
Update the $family-primary to equal the value of $family-serif;
Import the Bulma with @import "../assets/bulma/bulma.sass";

The source code can be found at: https://github.com/jacobcollinsdev/eponym, and I've include the code snippets below:

@charset "utf-8";
@import url('../assets/bulma/sass/utilities/initial-variables.sass');
@import url('../assets/bulma/sass/utilities/functions.sass');

@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander&display=swap');

$family-serif: "Grandstander", serif;
$family-primary: $family-serif;

@import "../assets/bulma/bulma.sass";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/styles.css">

    <title>Home | Eponym Mag</title>
</head>

I've only recently began using Bulma and think I may have gotten myself into a bit of a mess with what files I need to include etc, any insight appreciated.

Thanks!

Botany answered 24/10, 2020 at 11:39 Comment(0)

A bit late, but: you have to import just all you need from Bulma after setting all variables you want to customize (this is mentioned a few times in documentation). Also, there are examples for customize with node-sass,Sass CLI and webpack.

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander&display=swap');

$family-serif: "Grandstander", serif;
$family-primary: $family-serif;

@import "../assets/bulma/sass/utilities/initial-variables.sass";
@import "../assets/bulma/sass/utilities/functions.sass";

Heriot answered 7/11, 2020 at 21:20 Comment(0)

Also a bit late, I was having this same problem. I was using Rolllup JS with --watch(bundle running in background, watching for JS/SCSS file changes) flag. Primary was not updating no matter what I tried.

I was ready to give up when I stopped my --watch. Re-started Rollup and bang, primary and the rest were all updated. So I just needed to re-start my Rollup.

Buchholz answered 16/1, 2023 at 13:18 Comment(0)

Recommended topics

Hot tags