Jump to content

How to change font style in markdown editing

Recommended Posts

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

Link to comment
  • Replies 6
  • Created
  • Last Reply

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'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

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'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

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.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 3 years later...

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

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Link to comment
  • 11 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.