# Adding a Custom Font As I wanted to change the default font used, I found a way to easily do that using [Google Fonts](https://fonts.google.com). First head to [Google Fonts](https://fonts.google.com) and look for a font you would like to use for your Page. Then click on the font and click ```Get Font```. > [!info] Info > The font I currently use for my digital garden isn't Poppins anymore, but [Ubuntu](https://fonts.google.com/specimen/Ubuntu?query=ubuntu). --- ![[Screenshot 2024-07-19 at 10.00.19.webp]] --- Next click on ```Get embed code```. --- ![[Screenshot 2024-07-19 at 10.00.29.webp]] --- Select ```@import``` and copy the code in the ```<style>``` tags. --- ![[Screenshot 2024-07-19 at 10.00.41.webp]] --- Now, simply add this line at the very top of the ***publish.css*** you are using (this example will use **Poppins** which I am currently using for my Digital Garden): ``` css /* @import must always be at the top of your publish.css file */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); ``` To now make the theme use this font (and ensure that it is using it for everything → e.g. also the page links or the text above the Interactive Graph), add this code snippet to your ```body```: ```CSS body { --font-text-theme: 'Poppins'; font-family: var(--font-text-theme); ```