Integrate Custom Fonts Via @FontFace

Custom fonts are a great way to make your site truly unique. You can pick a font that matches your logo, a font featured on your business cards and press materials, or creative fonts that match the niche of your site. IONOS's built-in collection of fonts, along with those provided by the Google Fonts library, gives you a wide range of choices to match various site designs. If these are not enough, follow the guide below for embedding custom fonts in sites.

Disclaimer: This guide relies on a third-party tool, not one built by IONOS. Also, note that @font-face technology falls under custom code. We cannot guarantee that the font you choose supports web embedding, that the files you receive from the font foundry are ready-to-use or that the code you edit is in the correct format.

Although these issues rarely result in causing any problems with editing your site, please make sure to backup your site before you do any custom code changes. You can review our policy regarding custom code here.

Prepare Custom Fonts Files

Custom fonts may come in several formats, the most popular ones being .otf, .ttf, .woff, .svg, and .eot. In order to use your font, you need to make sure you own the .ttf, .eot and .svg files.

If you only have an .otf or .ttf file, we recommend using an external tool to convert the font to the required formats (in our guide below, we use FontSquirrel, but you can use any available alternatives).

Convert .otf or .ttf Files

1. Download or purchase the font in .otf or .ttf format.
   Note

   The font must be licensed for the web in order for it to work.

2. Go to the FontSquirrel webfont generator tool, upload the font and convert it using the Expert option. Choose the following formats (at least): TrueType (.ttf), EOT Lite (.eot), SVG (.svg) and then download the kit.

Upload Font Files to IONOS

If you already have the links to the fonts (for example, they are hosted on your font foundry and they provide you with the links or you uploaded the fonts to file sharing platform), skip to the next step. Otherwise, you will need to embed the generated .ttf, .svg and .eot versions of the font to your site.

1. In the left panel, click Content, click Site Content, and then click Manage Files.
2. Click Upload New File and upload these files.
3. If you hover over one of the items in Uploaded Files, click Select to generate a Download File button on your site.
4. On the navigation bar, click Info & Tools () and then click Preview Link. Right-click the button and select Copy link address. This is the link to the file on your IONOS site.

   This process must be done separately for each file, so that in the end, you will have three links to three file formats.

   Note

   This step does not work when previewing within the editor. You need to use the preview link accessible under Info & Tools on the navigation bar.

Embed Files on IONOS via @font-face

1. Go to Developer Mode in your site, open the site.css file and paste the following code:
   

@font-face {
font-family: 'FONT-NAME';
src: url('URL') format('embedded-opentype'),
url('URL') format('svg#FONT-NAME'),
url('URL') format('truetype');
font-weight: normal;
font-style: normal;
}

2. Navigate to the folder you were provided with at your font foundry or downloaded from FontSquirrel and look for a stylesheet file with a code similar to the one above. The line beginning with font-family: will have the unique name assigned to your font.
   
3. Copy the name of the font and replace two instances of FONT-NAME in the code snippet above with your font name.
4. Save and close Developer Mode.
5. In the left panel, click Content, and then click Site Content.
6. Click Manage Files, and click Select on the font file to add a button to the site.
7. Click the button to open the Content editor, right-click the font URL, and select Copy Link Address.
8. Go to Developer Mode, open site.css, and replace the URL with paths to the respective formats that you uploaded (the copied URL from the button in step 7) and click Save.

The following is an example of how the finished code should look:

Return to the editor, right-click the text element you want to edit and click Edit HTML/CSS. You can then apply the new font to widgets in all devices, or in specific device views using the CSS snippet in the following form: font-family: 'FONT-NAME' !important;. For example, for our font, we added this CSS line of code: font-family: 'inklandregular' !important;.

This way, you can apply the font to paragraphs, headings, and so on. If you would like to apply custom fonts to the text elements in the header, please do that in Developer Mode.

Apply Font to Specific Site Theme Fonts

To apply your custom fonts to the Site Theme, you must replace the specific CSS elements with your custom font name. To do this:

1. Click the Developer Mode button in navigation bar.
2. Click Site HTML/CSS, and then click site-theme.css.
3. Search for the specific heading or font class you want to change (for example, H1, H2, and so on), and replace the current font family with your custom font name.
4. Click Save.
5. Click Close to close developer mode.

Apply the Font via CSS

To set the font you embedded as your site's theme font, add the following CSS line to site.css. For more information on adding custom CSS, see Developer Mode.

Replace YOUR_GOOGLE_INTEGRATION_CODE above with the font-family CSS code you copied from Google Fonts. Click Save.

Apply the Font to a Specific Widget

To apply a font to an individual widget:

1. Right-click the widget, and click Edit HTML/CSS to open the widget's HTML/CSS editing window.
2. Add the font-family CSS code you saved in Step 2 above between the brackets { } under general or device specific CSS.
   

The font is now applied to the widget’s text elements and you can use the inline editor to change the colors and edit the text as normal.

Apply Font to Specific Site Theme Fonts

To apply your custom fonts to the site theme, you must replace the specific CSS elements with your custom font name. To do this:

1. Click the Developer Mode button in navigation bar.
2. Click Site HTML/CSS, and then click site-theme.css.
3. Search for the specific heading or font class you want to change (for example, H1, H2, and so on), and replace the current font family with your custom font name.
4. Click Save.
5. Click Close to close developer mode.

Notes

• IONOS does not support .woff2.
• Pay attention to the way glyphs are rendered in the web version of your font. Many custom fonts offer several version of glyphs. Please make sure your font renders correctly before applying it to the live site.
• Custom fonts may slow down site performance and loading time because the font must be downloaded before it is displayed. IONOS sites generally have very high page speed ranking, but a decrease in page loading speed is inevitable when additional fonts are loaded to the site. Be sure to consider whether the use of custom fonts justifies a decrease in page speed.
• In case the custom font does not render for various reasons, consider adding a fallback font in your CSS.
• With IONOS, you do not need to use @media queries to display fonts only on certain devices. Instead, you can simply add custom CSS per device.
• Only use fonts licensed for web embedding and/or commercial use. Not complying with a font owner’s license is a violation of their copyright.