How to use a Custom Google Font

Question

We're trying to figure out if there's a way to utilize a custom Google font rather than the default ones listed. Could you provide an example if you have one?

Answer 1

Using a custom Google font basically involves setting up a custom CSS file and loading and applying the font.

It is similar to this article: How can I change the base font style using CSS?

a) Setup a Custom CSS file.

• Either your entire dbFront install or for a specific database.
• For more instructions see: Using Custom CSS in dbFront

b) Find your preferred Google font at fonts.google.com

• For the purpose of this example we chose Unbounded

c) Scroll down and select the preferred font size and weight

• Click Select + to add it to the "Selected Family" area on the
  right.

d) Using the instructions on the side in fonts.google.com

• Copy the @import instructions
• Copy the CSS rules

e) Add the following content to your new custom CSS file.

Ensure that you add both the @import and the correct font-family

/* customSite.css */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200&display=swap');

/* Set the Custom Font in all of the specific dbFront areas */
body, .ui-widget, table.dataTable td {
  font-family: 'Unbounded', cursive;
}

f) Save the CSS file and reload your browser by clicking Cntrl-F5