Guest Share Posted October 27, 2015 (edited) 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 October 27, 2015 by Guest correct CSS syntax errors; correct markdown (substitute < for < character) so code shows in question Link to post
3 alxfyv 6,580 Solution Share Posted October 28, 2015 (edited) 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 October 28, 2015 by alxfyv AJZ 1 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 post
1 alxfyv 6,580 Share Posted October 27, 2015 (edited) I edited your question1. to correct a syntax error in your CSS (substituted 'Bebas Neue' for Bebas Neue), and2. 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, and3. 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 October 27, 2015 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. Link to post
1 alxfyv 6,580 Share Posted October 27, 2015 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 post
0 sssupers 2,470 Share Posted October 27, 2015 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 "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." Link to post
0 AskQuesty 1 Share Posted June 8, 2019 (edited) 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 June 8, 2019 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. Link to post
0 snorkelcookislands 1 Share Posted June 6, 2020 How do you simply change the font size of a paragraph in a markdown menu? Cheers Link to post
Question
Guest
Hello,
I am using html code in markdown:
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 Guestcorrect CSS syntax errors; correct markdown (substitute < for < character) so code shows in question
Link to post
Top Posters For This Question
3
1
1
Popular Days
Oct 27
4
Oct 28
1
Jun 8
1
Jun 6
1
Top Posters For This Question
alxfyv 3 posts
sssupers 1 post
AskQuesty 1 post
Popular Days
Oct 27 2015
4 posts
Oct 28 2015
1 post
Jun 8 2019
1 post
Jun 6 2020
1 post
Popular Posts
alxfyv
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 S
6 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment