Integrating Custom Fonts via @font-face

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. Duda'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 Duda sites.

Disclaimer: This guide relies on a third-party tool, not one built by Duda. 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.

Preparing 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 with Duda, 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).

Converting your .otf or .ttf file

1) Download or purchase the font in .otf or .ttf format. Please 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.

font_face1-en-US.png

Uploading font files to Duda

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

1) Upload these files via Content > Manage files > Upload new files.

font_face2-en-US.png

2) If you hover over one of the items in Uploaded Files, you can choose Select and this will generate a Download File button on your site.

font_face3-en-US.png

3) Open the site in preview mode, right-click the button and choose Copy link address. This is the link to the file on your Duda site.

font_face4-en-US.png

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

Embedding the files on Duda via @font-face

1) Go to Developer Mode in your site, open the site.css file and paste the following code (you will still need to edit it, so don't click Save just yet):

 

@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;

}

 

font_face5-en-US.png

Go back 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 in (at the time of writing this article, FontSquirrel assigns  the name 'stylesheet.css' to it).

The line starting with font-family: ... will have the unique name assigned to your font:

font_face6-en-US.png

Copy the name of the font and replace two instances of FONT-NAME in the code snippet above with your font name.

2) Replace the URL with paths to the respective formats that you uploaded and press Save.

Important: Do not forget to change the closing signs: a semicolon at the end of the files list, and a comma after .svg format.

Here’s  an example of how the finished code should look:

font_face7-en-US.png

3) You can now go back to your editor, right-click the text element you would like to edit and pick Edit HTML/CSS in the drop-down menu. 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_face8-en-US.png

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

Important considerations

● Duda 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's displayed. Duda 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 pagespeed.
● In case the custom font doesn’t render for various reasons, consider adding a “fallback” font in your CSS.
● With Duda, you don’t need to use @media queries to display fontsonly on certain devices. Instead, you can simply add custom CSS per device (see Step 6, above).
● 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.

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!