如何使用Bootstrap CDN更改网站字体

Question

I am trying to change the font of my website but I am not able to access the 'bootstrap.css' file since I am using Bootstrap CDN. Is there any way to access 'bootstrap.css' while still using Bootstrap CDN or do I have to install the complied Bootstrap files?

I've tried changing the 'font-family' in my 'main.css' file but that did not seem to do anything.

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 
}

Answer 1

Make sure when you include the stylesheets, main.css comes AFTER bootstrap like so:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">

In main.css, create a rule for the selectors you wish to overwrite

body {
  font-family: "Times New Roman";
}

If I have trouble verifying that the fonts are working, I will often pick out an obviously different font so the changes are easy to see and to ensure that there is not a problem with specificity or something else. After problems are figured out, I'll switch back to the real font I wanted to use.