Opentype font in web page without accents

StackOverflow https://stackoverflow.com/questions/18568007

  •  27-06-2022
  •  | 
  •  

Frage

I'm trying to use word accents in my web page using Neo Tech Black font, but it doesn't working here. I open the .otf file and I really find only alphabets characters in lower and upper case. There is anything that I can do to don't have to change my font choice?

Simplifying my html5 code is like

<html>
    <head>
        <title>Gustavo Schimiti Home Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <link rel="stylesheet" type="text/css" href="HPStyle.css"/>
    </head>

    <body>
        <div id="container">
            <header id="page_header"><h1>Gustavo Schimiti<h1></header>

            <nav>Home | Horários</nav>
        </div>
    </body>
</html>

and my css3 code is like

#container {
    width: 960px;
    margin: 0 auto 0;
    position: relative;
}

header {
    background-color: rgb(161, 182, 154);
    border-radius: 10px;
    float: left;
    width: 960px;
    height: 140px;
    font-family: NeoTech;
    src: url("NeoTech-Black.otf") format("opentype");
    text-align: center;
    color: white;
}

nav {
    background-color: rgb(90, 71, 27);
    border-radius: 10px;
    float: left;
    width: 960px;
    height: 40px;
    font-family: NeoTech;
    src: url("NeoTech-Black.otf") format("opentype");
    text-align: center;
    color: white;
}

And the problem occur with the 'á' character of the word 'Horários' in the nav tag.

War es hilfreich?

Lösung

This probably means the .otf file only contains the basic latin set of the font (i.e. lower and upper case letterforms and punctuation). This is mostly done to reduce the filesize and thus lower the loadingspeed.

In case you want to use the accents, you should look for the extended latin set. On fonts.com when ordering the webfont you can choose between "latin 1(25k)" and "latin ext 1(40k)".

http://www.fonts.com/font/monotype/neo-tech/black/web-font?var=742879

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top