google fonts does not work with bootstrap

Question

this is my google fonts links:

<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=Montserrat:wght@100;400;900&display=swap" rel="stylesheet">

and this is my css code:

h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Ethan, Jun 10 '22 at 19:47
Can you post a [mre] including your relevant bootstrap code? The code you provided works fine if I add a bootstrap table and use your imported font — AStombaugh, Jun 10 '22 at 22:16
You should use the browser inspect element to see if the style is being overwritten by older more specific code. — JDawwgy, Jun 10 '22 at 23:22

score 0 · Answer 1 · edited Jun 12 '22 at 15:37

You can add it directly in CSS like:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300&display=swap');

h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

If it doesn't work you have to see if bootstrap is not overwriting those values so you have to add !important there like:

h1{
    font-family: 'Montserrat', sans-serif!important;
    font-weight: 900;
}

google fonts does not work with bootstrap

1 Answers1