How use this type-font?

HTML-CSS
1

I already know that i how to write font:family 'Luxia'; but its in “regular” automatically. How can i change the font to Luxia > style Display?
DOWLOAD FONT: https://befonts.com/luxia-typeface.html

FontLuxia
FontLuxia687×739 119 KB

2

You need to install it, it’s a different font. Display fonts are versions of fonts optimised for display text (titles, so are normally adjusted to look better at larger sizes, with often with flourishes), they are not variants like bold or italic.

3

and how can i call it?, if already exist ‘Luxia’ (regular).

Like this:
font-family: ‘Luxxia Display’;
???

4

Basically, yes, it depends what you’ve called it. How are you using the original font? Via font-face in the CSS, or is it coming from some font service?

1 Like
5

The free download only gives you two versions. Luxia-Semi-Bold and Luxia-Semi-BoldDisplay

So it would be:

font-family: 'luxia-semi-bolddisplay';

1 Like
6

The reason I ask is that if you have it installed on your machine, and you just want to see it on a web page locally, you would use the font family name, which is “Luxia Semi-Bold Display”. This can be viewed in the system app FontBook on OSX & whatever the equivalent is on Windows.

If you’re using @font-face in the CSS, then you can call it anything you want:

@font-face {
  font-family: "luxia-semi-bolddisplay",
  src: local("Luxia Semi-Bold Display"),
         url(Luxia-Semi-BoldDisplay.otf);
}

But it can equally be

@font-face {
  font-family: "Fart",
  src: local("Luxia Semi-Bold Display"),
         url(Luxia-Semi-BoldDisplay.otf);
}

And then you can do like

h2 {
  font-family: Fart;
}

The local URL uses the family name, “Luxia Semi-Bold Display”.

If you’re converting it to a web font using something like FontSquirrel’s tools, then it will again use the family name, and will generate @font-face css for you.

Note that the font has extremely restrictive licensing for that version, you need to pay to use it if it’s being published on a website/webapp.