Early Test Page Keeps Breaking

[Pluss1]

Hi!

I'm in the process of designing my own web portfolio, and I have run into a problem I can't get past. I'm using a non-web font and started designing the front page at 4K native resolution and kept checking if it downscales properly while I was working. I only have three break points. The one I made myself, at 3840, the one Muse made at 960 and the one you can't do anything with at 320. I tried to remove the 960 breakpoint, but it doesn't seem like re-positioning does anything. It just keeps getting super large and break when the browser hits 960. Is this because I'm using a non-web font? Using Adobe Portfolio is not an option.

Here is my website as it is now: www.bjornmartin.no

Here is my Muse file: WeTransfer

Also, please don't rip the font. I'm the only one with a copy and the license to use it.

[Günter Heißenbüttel · Accepted solution]

This can’t work, because you are using a system font. System fonts have to be converted to an image during output to make sure, because nobody can be sure, that these fonts are installed on every visitor’s machine/device. Web design is not print design! You are not free in the choice of the fonts, you want to use.

To avoid converting font containers to images you have to use standard fonts or web fonts.

Because system fonts are converted to images, they obviously scale like images in responsive layouts according to the size of the browser window – that is, what happens in your sample site.

Please read my answer 4 in this thread for better understanding the issue: https://forums.adobe.com/thread/2357163​

More information about web fonts in Muse:

https://www.youtube.com/watch?v=2MIVaDuxc9A

https://www.youtube.com/watch?v=PUuqhSXUtoU

By the way;: What the hell do you need a breakpoint at 7680 px for? Are you using a screen with the dimensions of a soccer field?

[Pluss1]

Thanks for clarifying that. My guess was it would behave like a font, not like an image. Looks like I have to use a web font then. I forgot to change the resolution before saving. The idea was to start designing for 8K UHD and scale down, but I figured I could optimise the site for it later, when the resolution becomes more of a standard.

[Günter Heißenbüttel]

You should google „logical/physical resolution“!

Just imagine: If you place images in „8K“ resolution, it has roundabout 10 MB!