This tutorial will show you how to add Google Fonts to your DudaOne site.
Adding your Fonts
After selecting a font on the Google Fonts site, under step 3 select the @import option.
Copy the @import code. This is what we'll use to import your Font into DudaOne. Also, make a not of the code from step 4 "Integrate the fonts into your CSS". We'll use that code to apply our font to different elements.
Adding your font to DudaOne
To add this font as your site's default font,
In the DudaOne editor:
- Click on the 'Developer Mode' button in the top right corner of your editor.
- Navigate to ' Site HTML/CSS', then 'site.css'.
- add the following CSS:
Replace YOUR_GOOGLE_INTEGRATION_CODE above with the code from step 4 on Google Fonts, "Integrate the fonts into your CSS".
Applying a font to a specific paragraph
In order to apply a font to a new paragraph, hover over a paragraph -> Click the blue Paragraph button -> Edit Background.
Next, click the More tab and select CSS. Here you will see at least two CSS selectors. The ones that we'll want to edit starts with *.u_ and will NOT end with *. Under that selector paste in the code from step 4 on Google Fonts, "Integrate the fonts into your CSS".
Your Google font is now applied to your paragraph. You can use our inline editor to change the colors and edit the text as normal.