How to use a Custom Google Font

0 votes

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?

in Customization by (7.0k points)

1 Answer

0 votes

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.

b) Find your preferred Google font at

  • 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

d) Using the instructions on the side in

  • 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('');

/* 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

by (64.5k points)
Welcome to the dbFront Q&A site, where you can ask questions and receive answers from other members of the community.
 | Minimalist Answer Theme by Digitizor Media
Powered by Question2Answer