Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
Guest

How to change font style in markdown editing

Question

Guest

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

Edited by Guest
correct CSS syntax errors; correct markdown (substitute < for < character) so code shows in question

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 3

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.

Edited by alxfyv

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.

Share this post


Link to post
  • 1

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.

Edited by alxfyv

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.

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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>

alt text

Enjoy - *sss


"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post
  • 0

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

Edited by AskQuesty
Initial Revision

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.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...