Importing Font Families

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.
   
   
3. Find the specific style within your selected font family that you wish to use and click "Select this style".
   
   
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.
   
   
   
   
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.
   
   
   
   
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.
   
   
   
   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.
   
   
   
   
   
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. 
   
   

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.

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.

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.