How to change font style in markdown editing

Hello,

I am using html code in markdown:

<span style="color:#fff; font-family: 'Bebas Neue'; font-size: 4em;">INSPIRATION DAY</span>

I want to apply Bebas Neue font style (which is included in the font family) but it does not apply to the text...

Thanks for your help!

Ohyoon

Use a Code Block or a Markdown Block.

Inside the block, paste this and change the colour Hex value #f2cf4a to whatever you like.

<span style="color: #f2cf4a; font-family: Babas; font-size: 2em;">INSPIRATION DAY</span>

Enjoy - *sss

I edited your question
1. to correct a syntax error in your CSS (substituted 'Bebas Neue' for Bebas Neue), and
2. to substitute

<

for the < character so that your code would show up in the question as code rather than being executed by the markdown processor as HTML code, and
3. to enclose the code in

<pre><code></code></pre>

tags to make it appear as a code block in the question.

I tried the corrected CSS in a text markdown block to see if it would work as corrected. It did not.

I tested 9 fonts in a markdown block. Of the 9, 3 worked (Georgia, Trebuchet MS, and Times New Roman) and 6 did not (Bebas Neue, Alternate Gothic No. 3D, Alegreya SC, Old Standard TT, Libre Baskerville, and Graduate).

I submitted a ticket to Customer Support. We'll see what they say.

I've discovered the reason why the Bebas Neue font did not work in your markdown block. It's in several parts.

(1) To use the TypeKit (and Google) fonts as provided on Squarespace, one must use the Style Editor thereby making broad changes to whole use categories, i.e., body text, nav font, etc. This method is not intended to facilitate the use of these fonts in a more targeted fashion, i.e., for a single paragraph, for the content in a markdown block, or for a particular CSS class. See Squarespace' Guide on how fonts work in Squarespace and Squarespace' Guide on using TypeKit fonts in Squarespace.

(2) To use a TypeKit font in this more targeted fashion, one must create a Kit, “load" that Kit into Code Injection using the script and Kit ID provided by TypeKit, and then call upon the fonts in that Kit in individual instances. See Squarespace' Guide on using custom TypeKit fonts

(3) In my test of 9 fonts mentioned in my comment above, the 6 fonts that failed to load in the markdown block did so because they are TypeKit fonts and no Kit was loaded for them. The only way to reach them without loading a Kit is through the Style Editor but with the Style Editor you have to make broad use category changes.

(4) The 3 fonts that did not fail in the markdown block are not TypeKit fonts but what w3schools calls “web safe fonts” available in all browsers without loading them in a Kit.

So the short answer is that to use the Bebas Neue font in your markdown block, you will have to create a Kit at TypeKit and use their generated script and Kit ID to load the Kit into your site. Without loading a Kit, you are limited to the web safe fonts for targeted usage.

Hi @Ohyoonkwon, I made a video tutorial for you on how to Change Font Style in Markdown. Hope this helps! https://www.askquesty.com/post/change-font-style-in-markdown-squarespace-tutorial

How do you simply change the font size of a paragraph in a markdown menu?

Cheers