Change default font for H tags

[Therrapy]

Hi what is the best way to change the default font for titles etc with a google font? Thanks

[extrabright]

Hi,

Do you want to change the default font for all typography elements or just for the H tags?

In case you want to add an additional font here's what you have to do:

1. Add the Google font in the section of the page
2. Create a new _variables.scss file to store your custom variables: https://webpixels.io/docs/css/1.0/theme#creating-themes
3. Use the $font-display variable to change the font family
4. Compile the new Sass using your current setup or by following the examples in our docs: https://webpixels.io/docs/css/1.0/build-tools

Example

In your HTML page:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

In your _variables.scss file:

$font-display: 'Nunito';

// Use this variable to change the default font used by the H tags
$headings-font-family: $font-display;

[Therrapy]

Hi how do i compile i am using the boostrap starter? Thanks

[Therrapy]

[Therrapy]

ive also added font-display in the html

[webpixels]

$font-display and $headings-font-family must stay next to the $primary variable. As a general rule, your variables should stay before you import @webpixels/css files.

If you are using our bootstrap-starter-kit then all you need is to run these commands in your terminal:

npm run build

or start a server to watch changes live

npm start

[Therrapy]

great thanks

[Therrapy]

Hi we have added Gilroy font and we have 3 weights medium, semi bold, bold, what do we need to do to allow use of font-semibold, font-bold etc in html? at the moment we have added it and the font is working but the different weights do not change when adding the html code. Thanks & Regards

…

On Mon, 6 Dec 2021 at 18:43, Alexis Enache ***@***.***> wrote: Hi, Do you want to change the default font for all typography elements or just for the H tags? In case you want to add an additional font here's what you have to do: 1. Add the Google font in the section of the page 2. Create a new _variables.scss file to store your custom variables: https://webpixels.io/docs/css/1.0/theme#creating-themes 3. Use the $font-display variable to change the font family 4. Compile the new Sass using your current setup or by following the examples in our docs: https://webpixels.io/docs/css/1.0/build-tools *Example* In your HTML page: <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet"> In your _variables.scss file: $font-display: 'Nunito'; // Use this variable to change the default font used by the H tags$headings-font-family: $font-display; — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#14 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQATJCD5CIT73FID24Y2HPTUPTY4XANCNFSM5JPG3UXA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.