Fonts Library and Google Fonts

  • Knowledge Base
  • Responsive Website Builder
  • Fonts Library and Google Fonts
  • Duda Support > Responsive Website Builder > Editing a Site

Overview

The responsive website builder features a variety of fonts for your use. Set a global text font or choose to differentiate your text by using multiple different fonts on your website.

Font library

Below is a list of fonts present in the website builder. 

Abril Fatface Contrail One Indie Flower Open Sans Condensed Rokkitt
Alef Cookie Istok Web Open Sans Hebrew Sanchez
Alef Hebrew Courgette Itim Oswald Sans-serif
Alegreya Courier New Josefin Sans Overlock Sansita One
Alfa Slab One Creepster Josefin Slab Oxygen Satisfy
Alike Crete Round Julius Sans One Pacifico Shrikhand
Allura Crimson Text Jura Palanquin Signika
Amaranth Cuprum Karla Palatino Linotype Source Sans Pro
Amatic SC Dancing Script Laila Parisienne Special Elite
Amiko Droid Sans Lato Patua One Spinnaker
Antic Didone Droid Serif Libre Baskerville Paytone One Stalemate
Anton Duru Sans Lobster Permanent Marker Tahoma
Archivo Narrow Dynalight Lobster Two Petit Formal Script Teko
Arial Eater Lora Plaster
Times New Roman
Arial Black EB Garamond Lusitana Play Titan One
Arimo Emblema One Mate SC Playball Titillium Web
Arvo Enriqueta Maven Pro Playfair Display Trebuchet MS
Asap Exo Merienda Poiret One Ubuntu
Bad Script Exo 2 Merriweather Poppins Ubuntu Mono
Belgrano Fjalla One Mogra Prociono
Unifraktur Maguntia
Bitter Flamenco Monoton PT Sans Varela Round
Book Antiqua Fugaz One Montserrat PT Serif Verdana
Bree Serif Garamond Muli Puritan Vollkorn
Butcherman Georgia Museo Slab Quattrocento Work Sans
Cabin Glegoo Nosifer Quattrocento Sans
Yanone Kaffeesatz
Cairo Gloria Hallelujah Noticia Text Quicksand Yesteryear
Cardo Great Vibes Noto Sans
Racing Sans One
 
Catamaran Gudea Noto Serif Raleway  
Caudex Helvetica Nunito Roboto  
Codystar Impact Old Standard TT
Roboto Condensed
 
Comic Sans MS Inconsolata Open Sans Roboto Slab  
 

Google Fonts

You can embed any of the fonts available at Google Fonts foundry at your Duda site. Although these fonts cannot be added to the font library and will not appear in the inline text editor, they can be applied to various elements on your site via CSS.

Embedding the font on your site

1. Open the font you need on Google fonts and select it. In the pop-up window, copy and save the @import url and font-family lines of code:

2018-08-20_14-04-19.png

Important: under Embed code, do not copy the entire code snippet including the <style></style> tags. Simply copy the @import url line.

2.Via Developer Mode, open Site HTML/CSS > site.css and past the @import url code:addfontsdev2_en-US.png

Applying the font via CSS

Applying the font to Global text

To set the font you embedded as your site's global font, add the following CSS line to site.css:

*#dm div.dmContent *, *#dm div.dmFooter *, *#dm div.dm-title {YOUR_GOOGLE_INTEGRATION_CODE}

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

Applying the font to a specific widget

To apply this font to an individual widget, start by opening the widget’s HTML/CSS editing window.

addfontsdev3_en-US.png

Add the font-family CSS code you saved in Step 2 above between the brackets { } under general or device specific CSS.

addfontsdev4_en-US.png

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.

×

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!