Markdown font change in smartphone

I have a disturbing problem. When using markdowns with the code:

<div style="text-align:center"><span style="font-family:AVAYX; font-size:1.8em; color:black">**SOME OF OUR LATEST PROJECTS**</span> 

The font appear on my computer, but when I visit my site on my iphone the font in the markdown is changed to another.. looks like times new roman or something similar, but not the font that I'm using in the markdown.. 

What is wrong? Why isn't the markdown show the correct font in responsive view? 

Difficult to know. Can you share link to markdown on your site?

How am I doing that? Maybe you need my username and password? https://cuboid-caper-carz.squarespace.com/csr

Here are another code I've installed in a markdown:

<div style="text-align:RIGHT"><span style="font-family:broadcastmatter; font-size:2.2em; color:hsla(43, 36%, 90%, 1)">Our Vision</span><div style="text-align:RIGHT"><span style="font-family:avayx; font-size:1em; color:hsla(43, 36%, 90%, 1)">TO COMBINE FASHION WITH SUSTAINABLE MANUFACTURING TO CONTRIBUTE A BETTER HEALTH AND FUTURE FOR OUR LIVING PLANET</span>

None of the above fonts (broadcastmatter and avayx) appear on mobile view... only visible on computer view.

30 minutes ago, TobiasRL said:

How am I doing that? Maybe you need my username and password? https://cuboid-caper-carz.squarespace.com/csr

Here are another code I've installed in a markdown:

<div style="text-align:RIGHT"><span style="font-family:broadcastmatter; font-size:2.2em; color:hsla(43, 36%, 90%, 1)">Our Vision</span><div style="text-align:RIGHT"><span style="font-family:avayx; font-size:1em; color:hsla(43, 36%, 90%, 1)">TO COMBINE FASHION WITH SUSTAINABLE MANUFACTURING TO CONTRIBUTE A BETTER HEALTH AND FUTURE FOR OUR LIVING PLANET</span>

None of the above fonts (broadcastmatter and avayx) appear on mobile view... only visible on computer view.

 

Where is markdown in link you sent? I can't find them...

Thanks for taking time but I don't know how to share a specific markdown (frist time here in this forum).

The domain site is https://inotex.se/csr if you scroll down to the sewing machine you see a vision text. This vision text is inside a markdown with the code I sent before.

See my attached picture to see how it should look like and how its look on my computer but not in responsive view...

@TobiasRL Did you use font which provided by Squarespace or Custom font (you uploaded to your site)?

The font not showing here, both Computer/Mobile/Tablet.

If you use custom font, you need to declare with some code to use.

Okey, I used a font installed on my computer. But I have tried other fonts aswell, fonts that I can source in Squarespace site styles. But it don't work either. Do I need to inject custom code somewhere else or do something more than just a markdown to get this work?

3 minutes ago, TobiasRL said:

Okey, I used a font installed on my computer. But I have tried other fonts aswell, fonts that I can source in Squarespace site styles. But it don't work either. Do I need to inject custom code somewhere else or do something more than just a markdown to get this work?

If you use a font not provided by Squarespace. You need to add this code to Home > Design> Custom CSS

@font-face {
	font-family: broadcastmatter;
	src: url( paste font url here);
}

Then markdown font will work.

Thank you. Just a question. What url do I type in src: url ? The url for my website that links to the page where I'm using that font..?

Ok. Im a newbie. But I found info about the font-face for avayx. 

@font-face {
font-family: 'Avayx Regular Regular';
font-style: normal;
font-weight: normal;
src: local('Avayx Regular Regular'), url('Avayx.woff') format('woff');
}

So I did like this but it still dont work...? 

@font-face {
	font-family: Avayx Regular Regular;
	src: url(Avayx.woff);
}

12 minutes ago, TobiasRL said:

Ok. Im a newbie. But I found info about the font-face for avayx. 

@font-face {
font-family: 'Avayx Regular Regular';
font-style: normal;
font-weight: normal;
src: local('Avayx Regular Regular'), url('Avayx.woff') format('woff');
}

So I did like this but it still dont work...? 

@font-face {
	font-family: Avayx Regular Regular;
	src: url(Avayx.woff);
}

src: url( here is font url NOT font name);

Are you sure "Avayx.woff" is valid URL?

So right now my Custom CSS looking like: 

@font-face {
	font-family: Avayx Regular Regular;
	src: url(Avayx.woff);
}

And my Markdown looking like:

<span style="font-family:Avayx Regular Regular; font-size:0.7em; color:hsla(43, 36%, 90%, 1)">OUR VISION IS TO COMBINE FASHION WITH SUSTAINABLE MANUFACTURING TO CONTRIBUTE A BETTER HEALTH AND FUTURE FOR OUR LIVING PLANET</span>

And it still dont work, what do I need to change?

Not sure. Found it here: https://www.cufonfonts.com/font/avayx

5 minutes ago, TobiasRL said:

Not sure. Found it here: https://www.cufonfonts.com/font/avayx

@font-face {
	font-family: Avayx Regular Regular;
	src: url(you need to paste font file URL Here, NOT font name, eg: example.com/resources/avayx.ttf, download font to your pc, then upload to ss, and get url);
}

Yes! It's working! Thank you so much!!

I am having the same problem, but I did not use fonts outside of squarespace. Do I still need to add the same code to the custom CSS? I have it multiple fonts that I have used, so I do I need to to do it for all of them? If so, where did you find the src url for the font?

On 5/2/2020 at 11:56 PM, Amy_Kae said:

I am having the same problem, but I did not use fonts outside of squarespace. Do I still need to add the same code to the custom CSS? I have it multiple fonts that I have used, so I do I need to to do it for all of them? If so, where did you find the src url for the font?

h1 {
	font-family: monospace;
}
h2 {
	font-family: proxima-nova;
}
p {
	font-family: futura-pt;
}

Do similar for other elements