Add Google Fonts to Joomla

Your template ships with one typeface, and swapping it means editing template files that the next update overwrites. Google Fonts has over 1,500 families you can load with a single link tag. You can add Google Fonts to Joomla with one HTML snippet in Code Snippets.

The HTML snippet code

The snippet loads the Inter family in 3 weights from Google's servers and applies it to body text and headings. The 2 preconnect lines let the browser open the connection early, so the font arrives sooner.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">

<style>
:root {
    /* Cassiopeia, the default Joomla template, reads these 2 variables. */
    --cassiopeia-font-family-body: 'Inter', sans-serif;
    --cassiopeia-font-family-headings: 'Inter', sans-serif;
}

/* Other templates: set the font on the page directly. */
body,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
}
</style>

To use another family:

1. Open fonts.google.com and pick a family.
2. Select the weights you need and open the Get embed code panel.
3. Copy the <link> lines into the snippet in place of the 3 lines at the top.
4. Replace 'Inter' in the CSS with the family name from the CSS class section of the same panel.

Cassiopeia, the default Joomla template, reads its fonts from the 2 variables in the :root block, so the font applies everywhere at once. The body rule covers templates that don't use those variables. To use different fonts for headings and body text, load both families and set each variable to its own font.

How to add this snippet

1. Install Code Snippets if it isn't installed already.
2. Log into your Joomla backend.
3. Go to Components → Tassos Code Snippets.
4. Click New.
5. Enter a title, for example Google Fonts.
6. Set Code Type to HTML.
7. Set Insertion Method to Auto-Insert Locations.
8. Set Location to Site Header.
9. Paste the code above into the editor.
10. Click Save & Close.

Check that it works

1. Open any page on your site. The text already looks different if your template used another typeface.
2. Right-click a paragraph, choose Inspect, and open the Computed tab in the browser's developer tools.

font-family reads Inter, sans-serif, and the Network tab shows font files downloaded from fonts.gstatic.com.

To learn more about HTML snippets, read the HTML snippet docs.