Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 🎯  Solution Guides

  • Low Code Solutions

    Add "Tabs" to your app

    ID Target Link

    Use an address field to display a static street view thumbnail

    Turn your menu into a fixed menu

    Auto close mobile menu

    Display record information in a card

    How to add a back button to your app

    Add a collapsible accordion element to your app

    Code Snippets

    PHP Curl Create New Record

    PHP Get Records With Filters

    Google Scripts - Get record and create new records from connected table

    Save Tables and Fields into Spreadsheet

    Google Scripts - Export all records

    Webhook to save deleted records

    Send Messages to Slack

    Restrict Space and Force Uppercase in a Form

    Building Advanced Features

    Use Validation Rules to Ensure Unique Votes Per User

    Use Record Rules to Create an Audit Log

    Track current inventory with transactions

    Schedule Bookings and Prevent Double Bookings

    Create orders with multiple items and varying quantities

    2 Step Forms

    Unique Record Validation

    Restrict Editing Records to Record Owners

    Sum date/time field

    Duplicate Records

    Advanced App Customization

    How to embed a Tadabase page on another website

    Adding external fonts

    Custom Favicon

    Making apps mobile friendly

    Show date/time as a countdown

    Importing many images at once

    Adding QR Codes

    Adding charts to PDFs

    Customizing your app shortcut for mobile phones

    Animate parts of a page

    Design Customization

    Changing background colors

    Set background colors to the edge of a page

    Change the background of a column

    Add padding around a component

    Using an image as background for a page

    Adding a background image to a row, column, or component

  • Duplicate Connected Records

Categories
🎯 Solution Guides
Advanced App Customiza...
Adding external fonts

Adding external fonts

While Tadabase offers a library of themes to customize your app, each with their own unique fonts, you can also import external fonts from external services and save them to your app for further font customization. 

For instance, you can easily apply external fonts from Google Fonts to your app with the following steps: 

  1. Find the Google font family you wish to use by going to https://fonts.google.com/

  2. Click on the font you wish to use. For instance, the Oswald font.

    google-fonts-1.png
  3. Find the specific style within your selected font family that you wish to use and click "Select this style".

    gfont2.png
  4. Within the Embed tab of your selected font family, click Import, and copy the body of the font code leaving out the </style> tags.

    gfont3.png

  5. Then, paste this code snippet within the CSS tab of your app layout or page. Pasting the code within a layout will save this font family code for all pages, rows, columns, and components contained within that layout, and pasting it within a page will save this font family code for all rows, columns, and components contained within that page. Pasting the font family code within the CSS tab of a layout or page will not apply that font family, rather it will save it and make it available for all items contained within that layout or page. Remember to click Save CSS to save the pasted code.

    gfont4.png

  6. To actually apply the saved font family to a row, column, or component contained within the page/layout that you saved the font family code, simply enter the name of the font family within the row, column, or component's Design window > Fonts tab > Family setting.

    gfont5.png

    If you forget the name of the imported font family, you can extract the name from the font family code that was saved within the layout/page CSS tab.

    gfont6.png


  7. Once you save the font family name within a row's, column's, or component's Fonts Family setting, the font family will be applied.

    As you can see in the image below, the imported Google font family, Oswald, was applied to the Events data table. 

    gfont7.png

Learn more about how to access the Design window and Fonts tab for rows, columns, and components. 

 

 

Additionally, you can import an external Google Font and save it to your entire app so that it will be available throughout all layouts, pages, rows, columns, and components within your app. To save an imported Google Font to your entire app, copy the entire font family code including the body and tags within your selected font family's Embed tab > Import tab.

gfont8.png

Then, paste the code snippet within your app's Settings > Custom Header/Footer Code tab > Custom Header Code setting. Click Save to save this font family and make it available throughout your entire app.

gfont9.png

To actually apply this imported and saved font family to any layout, page, row, column, and component within your app, simply enter the name of the font family (i.e. Oswald) within the Fonts tab > Font Family setting of that item. 

How did we do ?

Previous Article
How to embed a Tadabase page on another website
Next Article
Custom Favicon
Back to top
API
100% Operational
Apps
100% Operational
Builder
100% Operational
Overall Status
100% Operational