Font

Bootstrap Studio Help
1

I imported in a google font and it is showing up under the font section. However, I can't get it to apply to my paragraph. Can someone tell me how? Thanks!

2

Importing the font is the first step, the next step is to reference the font family name in your css.

Easiest way to do this is select body in the HTML pane, the duplicate the default body class to a custom css file and then change the font family attribute to be the name of your imported google font .

3

In the Layout View Pane click once in your paragraph text, this should select the paragraph element. In the bottom right of the app, click on Style menu to expand and double click on styles.css file. This will open up the STYLES pane with the styles.css file loaded. Click in the box to create a Style rule. Click in the rule and type in the css property font-family hit tab and type in the fonts name you imported.

Should end up looking something like this:

p{
  font-family: whatever your google fonts name is;
}

Saj

4

I did that and when I export it still shows Glyphicons Halflings. the following is on one of my columns and the next is on a container. Both changed fonts in the layout when I applied the font but on the export it doesn't show it. Thanks for the help!

div.footer-clean { font-family:'Nunito'; }

div#footer2.container { font-family:'Nunito'; }

5

I do see that inherited from HTML still shows the body and HTML as sans-serif and Helvetica Neue. It won't let me edit it as it is locked by bootstrap.

6

You have to copy the body tag CSS to your custom CSS file and alter it, locked just means you can't alter the default file itself, it doesn't mean you can't alter it at all.

7

When I do that it puts a red line through it :(

8

if it put a line through the font then you didn't import the font correctly or you typo'd it or something. If it wasn't a line through it before you copied it, then something usually got typed wrong if it did it to the duplicated class. Check your fonts list and make sure you are adding the right font, or choose it from the list that pops up when you delete the font that was already in there.

9

Try taking those quotes out. If you're using those curved single quotes, it will be wrong. Also you don't need quotes at all if the font name(s) are a single word. Only font names that are 2+ words do you need to put quotes around that fonts name.

div.footer-clean {
   font-family:Nunito;
}

div#footer2.container {
    font-family:Nunito;
}

Saj

10

I can now see it in the css however, I need it to show up in the bootstrap css as I need the font-face links. Thoughts?

Thanks to everyone for helping me!

11

Makes sure that your stylesheet file order is correct if you have more then one so that any other possible override isn't happening. Right click on Style menu on the bottom right and select Include Order... drag your custom css file to the bottom. If you have more then one CSS file this should give your override in the inheritance order priority.

If that's not the case do a simple test by selecting the paragraph and in the STYLE pane untick/tick the paragraph off/on the font-family you have to see if you notice the font's appearance changing if it is then it's working.

I noticed that the font is kind of close to the Helvetica Neue with some slight changes so it could possible appear to you as if it didn't work. Which is why I will use the trick above to make sure and override does in fact work.

Saj

12

For a default font used across your website you have to add a @font-face with according src as well as set the default font with exactly same name in something like html * { font-family: ... }