Hi, I opened a new project with the “Creative” starter template. I chose this one because I like the way the Navbar changes from a transparent background to solid, when I scroll down the page. However, I want to change the design theme to use the “Lux” font type. But the app doesn’t allow me to change it from the design settings options. What is the best work around for this? I appreciate the help.
Thank you.
Bootstrap Studio’s templates often use a customized version of the bootstrap.min.css file. This is the main file that controls the website’s basic look and feel, including the fonts. If you go to the Overview panel and left click on the Body, then look at the Styles panel, you’ll see the CSS font rule for the body of this website…
Because this font declaration is made in the bootstrap.min.css file, it cannot be changed (that’s what the little lock icon in front of the small “Bootstrap” text means. In order to override this rule, you have to duplicate it in your own stylesheet. This is done easily by clicking the three dots to the right of this CSS rule and selecting Copy to > New Stylesheet. Then you’ll see a duplicate of this CSS rule in your new stylesheet that is no longer locked.
(NOTE: The new stylesheet will be called “untitled.css” because that’s the default name the program uses when it creates a new stylesheet. You can go to the Design panel, right click untitled.css and rename it whatever you want.)
Now that the rule is unlocked, you can add whatever font you want and replace the font Merriweather with your preferred font by double-clicking the font-family rule, erase the existing fonts, and pick a new one.
If you want to change the font used in the headings, you would do the same thing with the CSS rule that declares the default font for the headings (which in this case is Open Sans.)
Hope this helps you.
Yes, it helps. Thank you very much.
