Guest Posted October 27, 2015 Share Posted October 27, 2015 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
sssupers Posted October 27, 2015 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 Hi, I'm sssupers. Link to comment
alxfyv Posted October 27, 2015 Share Posted October 27, 2015 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. 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
alxfyv Posted October 27, 2015 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 comment
alxfyv Posted October 28, 2015 Share Posted October 28, 2015 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
AskQuesty Posted June 8, 2019 Share Posted June 8, 2019 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
snorkelcookislands Posted June 6, 2020 Share Posted June 6, 2020 How do you simply change the font size of a paragraph in a markdown menu? Cheers Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.