css Question posted in
Some basic documentation can be found here.

Css – How are different .tff files loaded that differ only by <number>-pt?

Curious about the way fonts worked before web/variable fonts. I’m building a web page’s CSS, following a video course. I downloaded the Inter font from fonts.google.com, and the download included multiple sizes for each style such as:

Inter_18pt-Regular.ttf
Inter_24pt-Regular.ttf
Inter_28pt-Regular.ttf

Why does it include multiple sizes? I guess if I use font size 20pt on my page it will scale whichever font I pick up or down to the target size. Should I pick the font file that’s closest to the desired size? Or are these intended to be used together somehow?

I’m actually not using these files. I’m using the "embed" button to grab the fonts from Google’s CDN, but I’m curious about these static files in the download.

Tags:

2

Answers


  1. 0

    The downloadable fonts from Google are intended to be installed on a specific computer for use by desktop applications such as word processors. They are not intended for web use.

    For web use, select the embed option instead.

    clip of Google's get embed code button

    Here is a demo of using the font Inter on the web.

    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
  font-family: Inter;
}

p:nth-child(1) {
  font-weight: 176;
}

p:nth-child(2) {
  font-weight: 492;
  font-style: italic;
}

p:nth-child(3) {
  font-weight: 745;
}
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
</p>
<p>
Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.
</p>

    PS. The .zip file you downloaded from Google contains a file README.txt which explains the purpose of the large number of .ttf files in the package.

    Login or Signup to reply.
  2. 0

    These three file names represent three different optical sizes of the font Inter Regular. Here is an excerpt from Google’s explanation of the concept of optical size:

    Optical sizes in a variable font are different versions of a typeface
    optimized for use at singular specific sizes, such as 14 pt or 144 pt.
    Small (or body) optical sizes tend to have less stroke contrast, more
    open and wider spacing, and a taller x-height than those of their
    large (or display) counterparts.

    In the case of Inter Regular, the only difference seems to be the letter spacing.

    image comparing the three optical sizes
    You asked:

    Should I pick the font file that’s closest to the desired size? Or are these intended to be used together somehow?

    Yes, I imagine that you’d choose the font closest to the desired size. That would give you the appearance intended by the font designer. But at the end of the day the three optical sizes are available and you can decide whether to use one of them or a combination. It would only be really picky designers who would notice the difference.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search