Menu

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.3k 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 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

by (65.2k 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
...