How I added Font Awesome and Google Fonts to my published Obsidian site

Share & showcase
1

I hope you find this useful. My instructions for installing Font Awesome and Google Fonts on a published Obsidian site, plus more.

Changing the look of your Obsidian site using fonts and CSS

Updated Obsidian Publish instructions.

Add Font Awesome icons to Obsidian Publish - The Quantum Garden (quantumgardener.info)

1 Like
2

Hi david,
Thanks for sharing: this is exactly what I was looking for!
I have followed your instructions but can not get the icons to appear
My setup is a bit different: I still use obsidian subdomain to publish my site (if I follow their procedure and apply a CNAME it is in http not https and I can’t do anything on my side to change that) but I do have my own domains and subdomains.

I loaded the files you mentioned and my publish.css is located under my root folder and I published it.
It does call the following: https://lib.freedsap.com/webfonts/all.css
and I can also check that it was published by checking
publish.css - Obsidian Publish

However, my test page does not display the fa icons
and I have error as follows:
if I go on Obsidian Publish
→ I get CORS error: “Access to font at ‘https://lib.freedsap.com/webfonts/fa-brands-400.woff2’ from origin ‘https://publish.obsidian.md’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
fa-brands-400.woff2:1 Failed to load resource: net::ERR_FAILED”
I get it for all the files

I relocated the file to my main domain freedsap.com but still get the same message:

If I access the site with the CNAME obs.freedsap.com

Access to font at ‘https://freedsap.com/webfonts/fa-brands-400.woff2’ from origin ‘https://obs.freedsap.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
all.css:1 GET https://freedsap.com/webfonts/fa-brands-400.woff2 net::ERR_FAILE

or with publish.obisdian.md:

Access to font at ‘https://freedsap.com/webfonts/fa-brands-400.woff2’ from origin ‘https://publish.obsidian.md’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
all.css:1 GET https://freedsap.com/webfonts/fa-brands-400.woff2 net::ERR_FAILED

Sorry for the mess :grinning:

Any idea what to do with this error message?
thanks in advance

3

also is this browser issue, have you tried accessing the page with a different browser?

4

  1. again we will have a third option that doesn’t rely on clouldflare or url redirect

  2. how is the other user able to make it work and you don’t? Are you sure it’s CORS problem?

5

This is not a browser issue: I have tried on both Chrome and Firefox on two different machines.

This a server side http request authorization issue due to cross-origin not allowed/setup.

6
  1. yes roger that
  2. I think david has a setup that involves only his domain and subdomain he owns. he does not have to rely on publish.obsidian.md domain like I do. So he has no CORS cross-origin problem.
    I have tried loading webfonts file all.css to publish.obisdian.md but the file is not seen for publication. It only recognizes the publish.css file for publication. I guess this is the expected behaviour as you don’t allow loading files or folders other than the normal ones right?
7

Sorry @fredini, there isn’t much I can offer to help there. This was very much built on a site that I own and so have access to all the files. all.css and the font files are loaded directly on my site.

I think I started with trying to load the fonts on the obsidian publish site like you did.

publish.css is importing all.css and at the very bottom of that are references to the files. You may need to adjust them to have a full URL rather than something relative on your site. At a minimum …/…/webfonts needs to be https://freedsap.com/webfonts/fa-brands-400.woff2

But I am just guessing here.

8

Hi david @dcb , thanks for your feedback.
The relative url work fine.
As you can see in the errors, it tries to fetch the files at the right location.
The problem is CORS and http request not being authorized.
For other reasons I can’t have the full setup on my domain and I will still have this problem unless obsidian was to allow CORS on their side.
I am waiting also for their offering without relying on cloudflare or proxy setup.
In the meantime, i will use a workaround.

I do have another question:
I would like to use the FA also on desktop and therefore have seamless transition between
obsidian desktop rendering of icons and obisdian publish also with the icons.
My question is can I still use the web syntax <i class="fas fa-check-circle"></i> to have it rendered on desktop version?
Is that what you do ?

9

Hi @fredini, that’s exactly what I do. For it to work you need the all.css file from the distribution download and place it in your Obsidian css snippets location. I can’t remember if I had to change the file paths there or not.

10

HI @dcb , thanks
I applied the instructions from your blog

  • installed the fonts file on windows (my OS)
  • and located the all.css file to the snippets folder
    And it works with the i class syntax as expected. This is great.
    I did not change the all.css file regarding location of the files.
    I thought it would take the icons from the OS files loaded, right? not from any url? It will do so only on the publish site not the local site?
    It seems this is what I am experiencing because if I try to suppress an installed font file from my OS it throws the error message that it is currently in use.

Once I resolve the CORS issue with the published site, I will be all good to go.

Thanks for “sharing & showcasing”, this was useful for me

1 Like
11

I have 2 copies of all.css. One for the published site and one locally in the Obsidian css snippets. The second is what I was referring to yesterday.

12

Hi, yes I understood. And this is my target setup also: One all.css file locally and one for the published site (when I can solve the other issue there.)
But, I was referring to the actual webfonts files not the all.css file.
I thought you mentioned their “file paths” in your previous message.
And I was just pointing that these file paths to all the webfonts files do not have to be changed in the local all.css. Because, I understand that the system reads them from the local OS fonts installation.
It seems I have difficulties explaining myself in writing.

Anyway, I have one last question:
For the moment I can only use publish.obsidian.md because the procedure with CNAME and another host than cloudflare does not work.
I am curious to know how you made your setup: out of the 2 setups mentioned in Obsidian Publish - Obsidian Publish
→ are you using cloudflare or a proxy setup?

"You can setup a custom domain or subdomain for your Obsidian Publish site. Currently, we don’t yet have a way to provision SSL certificate on your behalf, so you need to resort to either an SSL-enabled server of your own, or to setup your site on CloudFlare, which provides SSL for free.

You can also setup Obsidian Publish as a sub-URL of a site you own. For example, https://my-site.com/my-notes/. To achieve this, you must host your own server and proxy all requests to our server at https://publish.obsidian.md/."

13

My site iswas hosted on Netlify with my domain mapped to there. Now on Obsidian Publish.