@CSS font-face installs the font on the computer or just uses it on the website?

Asked

Viewed 2,845 times

5

I was told that when I use @font-face on a page and someone accesses it, the operating system downloads and installs the source.

It happens that I noticed the following: when creating a file with @font-face and access, the font appears correctly, but if I then remove @font-face and open the same page, the font does not load, IE, it was not installed on my pc.

I concluded that the source only appears on the site, is correct this statement?

<html>
<head>

<style>
@font-face {
font-family: "scarface";
src: url("/wp-content/uploads/fonts/scarface-webfont.eot"); /* para IE */
src: local("scarface"), url("/wp-content/uploads/fonts/scarface-webfont.ttf") format("opentype");
}

body { font-family: "scarface", Cursive; font-size: 24px; }

</style>

</head>
<body>

   Texto

</body>
</html>
html5 css3
  • 1

    I’m not in favor of radical edits, but in this case I think it’s healthy. If you don’t agree, you can edit and even reverse. However, try to analyse my amendments and understand why they.

  • 1

    Bacco until I understood better with your edition, I get shit what I did, but to 17 hours on pc creating a site here already to all wrong kk

2 answers

8


@font-face does not install the font in OS:

Its statement is correct, so much so that the @font-face directive lowers the font for use in the browser, and has no relation to the operating system sources, so much so that the most common formats for web as . eot, . Woff and . svg are not system compatible (ttf is exception).

The font is never installed on the system (or temporarily), so if you have the browser open on the page, even if the font appears correctly, it will not be available in other applications.

Just take the test: open a page with custom fonts, and then run an application like Word, or Photoshop, anyone who has a choice of fonts. You will notice that the source of the site does not appear among those available by OS (which is good, otherwise your system would become a mess).

  • That’s what I thought too!

  • 1

    Then I can remove the site("Scarface") because it is not good for anything correct?

  • 1

    In this specific case, the location would only make sense if you wanted to, for example, use a system font, but call it by another name in css, such as local font-family "Araruta" ('Arial'), or prioritize the location if it is already installed. In practice even normally does not make sense, it is even risky to have another one with the same name in OS, completely different, and mess up its layout. I would avoid the site() yes.

  • 1

    @Lucasc. S including, it would be interesting to see the Woff and svg formats, often the Woff is smaller than ttf, improving the page performance (but keeping the . eot pro IE). See this page for a good example of font-face: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ (and a toast with a technique to kill the spot() : http://notenicewebtype.com/s/2010/05/20/bulletproof-smiley-font-face-syntax/ )

3

The value local() causes the browser to search for the font on the visitor’s computer before downloading the one on the server.

But by my knowledge it does not download, if you pick one of google fonts for example, it just temporarily installs (until you remove from the site) on the site. More information you can find here.

  • 1

    So I’m right right?

  • 1

    I suppose so!!

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.