Menu
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:
$family-serif: "Grandstander", serif;
$family-primary to equal the value of $family-serif;@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!
228
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";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
