Design Using Google Web Fonts

The Google Fonts API is a solid solution to adding variety beyond the supported internet fonts. Using web fonts as opposed to inline graphics has several advantages. In addition to being easier to update and change, the text can be read directly by automated screen reading programs. This helps to make your site more accessible to the visually impaired and non-English speakers who use online translation services.

View this Submission Form

Steps to adding Google web fonts to your Caspio DataPage:

Add Google’s Style to your DataPage Header

In every DataPage where you would like to display a Google web font you must include a link to Google’s web font stylesheet. Select the font you would like to use from the Google Font Directory. Replace “Font Name” in the following line with the font you would like to use.

Open the DataPage Wizard by selecting your DataPage and clicking the Edit button. Proceed to the Configure Fields screen. Using the Insert button add Header and Footer sections to your DataPage Elements. Paste the above code into your DataPage Header. Press Finish to save your DataPage.

* Note – If you are embedding your DataPages, you can also paste the above code directly into your host webpage header. Because Caspio DataPages respond to cascading style sheets (CSS) the data included in the link will be made accessible to the DataPage in most cases.

Add the font-family attribute to appropriate classes

Now go to the Styles view. Select the style that is applied to your DataPage and click Edit. On the first page be sure to check Show Advanced Options (CSS Source).

Show the CSS Source

Continue to the last page of the Style Wizard. Click on the Advanced tag. Now you can replace the current font-family attribute values with the name of your Google web font. You will probably need to replace the attribute in several CSS classes. Labels, Errors, Data and HTML Tags all have multiple CSS classes that can be changed.

Add the Font Family to your CSS

Unfortunately, because the font is loading in your DataPage, you will not be able to see the font in the Style Preview window.

Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.