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.
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:
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?
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
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 ?
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.
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
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/."