Web fonts and web-font stylesheets

Fontfitter · September 24, 2025, 2:38pm

New to Xway - I used Insert > Menu to make 4 items in Helvetica, Medium size text. All good so far.

Next, added a box as Flex container. Inserted a smaller box for HTML code for a custom webfont - which does display correctly at 16px. Now if I size the webfont larger, say 40px in my code, it makes Menu text larger too and expands all the other text on the page and pushes other elements further down. If this a Parent/Child issue, how should I solve this?

Any pointers would be useful as I cannot move on with resolving this issue. Thanks

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
  font-family: AdmarkRegular;
  src: url('admarstdad-reg-webfont.eot');
  src: url('admarstdad-reg-webfont.eot?#iefix') format('embedded-opentype'),
       url('admarstdad-reg-webfont.woff2') format('woff2'),
       url('admarstdad-reg-webfont.woff') format('woff'),
       url('admarstdad-reg-webfont.ttf') format('truetype'),
       url('admarstdad-reg-webfont.svg#admark_stdregular') format('svg');
}

div {
  font-family: AdmarkRegular;
font-size: 40px;
}
</style>
</head>
<body>

<div>ARadeg2</div>

</body>
</html>

Jeremy · September 24, 2025, 3:02pm

Hi Adrian,

That doesn’t look like normal Xway-generated HTML, but it seems there is a general style that sets the font family and size for any div. This will also affect children of any div (e.g. the page div). Did you add this via CSS Markup?

div {
  font-family: AdmarkRegular;
font-size: 40px;
}

I think the best thing would be to remove the div style, and style text using either (1) default styles for paragraphs etc (Page Inspector), or (2) box styles (Box Inspector), or (3) paragraph styles (Paragraph Inspector). If it’s possible to add the web font via an HTML URL (in Xway’s Fonts view), that will also make things simpler. If that’s not possible, it may be possible to combine a font definition (in the Fonts view) with CSS Markup.

Jeremy · September 24, 2025, 5:12pm

If it’s not possible to add the font via an HTML URL, you should be able to add the @font-face definition in CSS Markup, and then add “AdmarkRegular” in Xway’s Fonts view. If you have also installed the font as a Mac font, you should be able to see it in Xway’s Page view, as well as in the Web view (and in browsers).

Having googled “AdmarkRegular” I see that this is a font that you have designed. It looks very nice.

Fontfitter · September 25, 2025, 8:02am

I tried adding the font to Xway’s Text > Font menu a couple times and ended up with two entries in View > Fonts list which I cannot edit or delete! As all files are in the same folder I had no idea what ‘path’ to enter, or even what structure the path should take. I tried just a literal http etc… to the font.ttf, also an ftp path. The input field will not accept just the font filename itself. So the names are stuck in the Text > Font menu.

So I tried using CSS stylesheet with Paragraph style in my HTML box which succeeded:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body>
<p style="font-family: AdmarkRegular, serif; font-size: 40px; color: #333;">
  Admark Regular
</p>
</body>
</html>

Thanks, I can now move on with the webfont installs and formatting.

Jeremy · September 25, 2025, 10:46am

If you deselect the Permanent checkbox in the Fonts view, any font that is not being used will be deleted. Note that temporary (non-permanent) fonts are not always deleted immediately (see the Working with Fonts section of the Xway User Guide).

Creating a stylesheet with your font definition seems like a good solution - this is better than my previous suggestion, and is essentially how Google Font URLs work.

I’m not sure how you are adding the stylesheet (perhaps via Generic Markup?), but the most straightforward way would be to use the URL field in the Fonts view. E.g.

Create a stylesheet that contains the font definition for a specific font, and name it after that font (e.g. AdmarkRegular.css)
Upload it to a “fonts” folder in your site (using a third-party upload application)
Navigate to that folder in a browser and copy the URL from the address field
Add AdmarkRegular to Xway’s Fonts view
Enter the URL (e.g. “https://example.com/fonts/AdmarkRegular.css”) in the URL field for AdmarkRegular

Fontfitter · September 25, 2025, 5:34pm

I will stick with HTML Paragraph style for each of the 98 webfonts font name displays.

But it would be nice to pick one of my typefaces in two weights available in the Text > Font menu, as these could be used throughout the website as a house style. But… for example adding ‘AdmarkRegular’ to the menu as suggested is not working so far…?

Jeremy · September 25, 2025, 6:38pm

In what way is it not working?

Are you trying to group different weights and styles in a single family, e.g. Regular, Bold, Italic, Bold Italic and more? That’s certainly possible (most Google fonts do this), and I think you could get some clues from studying a Google font link: e.g. by pasting https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700 into a browser address bar and studying the stylesheet that Google generates.

In this case, Google provides multiple @font-face definitions, so there is a separate definition for each style and weight (e.g. font-style: italic and font-weight: 400), along with a separate URL for each definition, but they all specify the same family (font-family: ‘PT Sans’).

Following this example, I think you could construct a stylesheet that specifies different weights and styles for “Admark” (font-family: Admark), so that AdmarkRegular would be a single style/weight within an “Admark” family.

If you do that, you should be able to add “Admark” to Xway’s Fonts view and set its URL to point to the stylesheet. Admark would then behave like other fonts (Times, Palatino, PT Sans etc.) in that you would be able to choose “Admark” from a Font popup, and separately choose a style (Normal, Italic) and weight from Xway’s Font Style and Weight popups.

Fontfitter · September 25, 2025, 8:21pm

The idea of more than one style is an ambition, but for now I’d be happy with a single font experiment to prove the principle. Currently the font name ‘AdmarkRegular’ appears in Xway’s Font menu, but only returns the Alternate listed ‘Charter’ font. I will try as you suggest, adding more parameters to the font in the Google example and see what happens. At this point I’m not sure if its the URL or the CSS that’s the issue…

Jeremy · September 26, 2025, 10:35am

Meaning: the font that you see in Xway’s Page view is Charter rather than AdmarkRegular?

There are two things you need to do to view a web font in Xway:

Set a URL in Xway’s Fonts view. This will allow you (and other people) to view the font in browsers, and in Xway’s Web view.
Install the font as a Mac font. This will allow you to use it in Xway’s Page (layout) view. Xway uses standard Mac APIs to display text in its Page view, so it needs the font to be available as a Mac font. If you can display Admark (or AdmarkRegular) in TextEdit, Pages, and other Mac applications, you should be able to display it in Xway’s Page view.

It may be helpful if you follow the steps in this order: make sure that you can view the font in Xway’s Web view and in browsers before you install it as a general Mac font (you can use the Font Book application to install and uninstall fonts). The reason I say this is because it’s possible to add any Mac font (e.g. Papyrus) to Xway’s font list: in this case, you and other Mac users will be able to view the font, but people who are browsing on non-Apple devices will not be able to view it unless you have provided a web-font URL. Once you can see the font in browsers (and Xway’s Web view), install it (via Font Book) so that you can also see it in Xway’s Page view.

The steps that I listed above correspond to what happens with Google fonts: Google provide a URL that can be used to access the font as a web font, and they also provide a download button that allows you to download and install the font on Macs, PCs and other computers.

One other point is that the font name matters: if you have installed AdmarkRegular on your Mac, it needs to be named “AdmarkRegular” (and not “Admark Regular” or “Admark”) in Xway’s font list. If you’d like different weights and styles to be available as a single family, you need to (1) associate them as a family in the web-font stylesheet (see above), and you also need to (2) associate them as a family in the font definition. I think that the way (2) works is that the font definition contains a family name [*] - but you probably know more about that than I do!

[*] If I look at PT Sans in Font Book, there is a section called “Identifiers” which lists four names: Family Name (PT Sans), Style Name (Regular), PostScript Name (PTSans-Regular), and Unique Name (PT Sans; 13.0d3e2; 2017-06-30)

Fontfitter · October 3, 2025, 8:58pm

Update: I have now mastered how to format custom webfonts as

Paragraph styling

. I persevered and have also created an ‘admark-fam.css’ to control the 6 weights and their styles so they appear in Xway font menu under one Family Name. So I’m now using them just the same way as standard fonts.

What was not initially clear and took some experimenting, is that in setting up the credentials the label ‘Font Name’ is not descriptive enough. It should more accurately be described as ‘Font/Family Name’.

Overall I’m really impressed with the improvements between Freeway and Xway and your suggestions made sense of everything.

Thank you!