Search
Close this search box.

Use Custom Font in Obsidian

Obsidian Embedded Custom Font

Table of Contents

1. Introduction

Have you ever tried to change font in Obsidian? And then you got idea that it is not like in ordinary text editor? Don’t worry I have solution for you right now. In this article I will show you how you can change font instantly without creating new theme or template, just if you need something really quickly.

2. It’s all about CSS

Notes itself are text files which are following markdown formatting. Although the way how you can see letters, code snippets and background is defined by CSS styles, same as known from HTML web mastering world.

So know you might have a question where CSS files are located? It’s under your Vault location and you can figure out it by following menu

Obsidian -> Settings -> Appearance -> CSS Snippets (on bottom page)

catalog of snippets for obsidian css files

Click on Catalog icon to jump into folder. Then create css file.

3. CSS file content

You need to download your custom font or if you have it available already in the system then you can simply use it

				
					.yourClassNameWhateverWant {    
	  font-family: 'YourFontYouWantToUse', serif;
	  font-size: 38px;
	  line-height: 45px;
}
				
			

then reload snippets by clicking on circle icon in CSS snippets section

Once done you can use your custom style.

				
					<h1 class="yourClassNameWhateverWant">
Your Header
</h1>

or 

<p1 class="yourClassNameWhateverWant">
Your Paragraph
</p1>

				
			

4. Embedding font in CSS file

You can convert font file into base64 format and then put it inside CSS file.

				
					@font-face { 
  font-family: "someFont", serif;
  font-size: 38px;
  line-height: 45px;
  src: url(data:font/ttf;base64,AAEAAAASA.......0CDgAE);
}
				
			

Value for base64 you can generate yourself or use websites like

https://hellogreg.github.io/woff2base/

which will generate whole code to paste in your CSS file.

5. Conclusion

In this knowledge article you have learned how quickly setup your custom font to be used in Obsidian. Now you can experiment yourself and enjoy your new fonts.

Have a nice coding!

Follow me on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

Share the Post:

Enjoy Free Useful Amazing Content

Related Posts