Custom font in html/css does not work

Asked

Viewed 5,359 times

2

I’m trying to insert a non-standard font into my html, but it’s not working. I downloaded the source and put it in a folder /font inside the briefcase css. Follows the code:

@font-face {
    font-family: sans-pro;
    src: url("/font/source-sans-pro/SourceSansPro-Regular.ttf");
}

#header1 {
  font-family: sans-pro;
  color: red;
}

am using Windows7 and wampserver.

follows the location of the source: Localização das fontes dentro da pasta "css/font"

html css html5 css-font-face font

4 answers

1

It would not be better to call the source via Google Api?

Example in css:

    <style>
        @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
    </style>

Example in html inside tag <head>:

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

To use:

    font-family: 'Source Sans Pro', sans-serif;

You can customize it as you like by Google Fonts

0

I was able to make it work with the source installed on the PC, but it was necessary to put the code on the css page and the main page. See only:

IN HTML:

<head>

    <title> :: TEXTO EM CSS ::</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css_style/h12_texto_css.css" type="text/css" 
          rel="stylesheet">

    <!-- IMPORTANDO DE DENTRO DO PRÓPRIO PC! -->
    <style type="text/css">
        @font-face {
            font-family: 'Tiza';
            src: url('fonts/tiza.eot');
            src: url('fonts/tiza.eot?#iefix') format('embedded-opentype'),
                 url('fonts/tiza.woff') format('woff'),
                 url('fonts/tiza.ttf') format('truetype'),
                 url('fonts/tiza.svg#Tiza') format('svg');  
        }
    </style>


    <!-- IMPORTANDO DA API DO GOOLE OUTRAS FONTE - VEJA EM 
    http://fonts.google.com -->

    <style> /* mantenha dessa forma, mesmo que o editor sinalizee erro! */
        @import url('https://fonts.googleapis.com/css?family=Bad+Script');
        @import url('https://fonts.googleapis.com/css?family=Patua+One');
    </style>

</head>

IN CSS: veja como fica no CSS

Then, in CSS just call the fonts normally. Relmente pelo Google API é muitoooooo mais simples! Muito mesmo! However, you are in the dependency of their server (although I think will NEVER give problem hehehe).

0

src: url("font/source-sans-pro/SourceSansPro-Regular.ttf");

or so

src: url("./font/source-sans-pro/SourceSansPro-Regular.ttf");

  • tried both suggestions but no success.

  • @Fernandowilliam tries without quotation marks like this src: url(font/source-sans-pro/SourceSansPro-Regular.ttf);

  • Nothing done, my friend!

  • Which browser? Do (cross-browser): @font-face { font-family: 'sans-pro'; src:url(font/source-sans-pro/Sourcesanspro-Regular.eot? #iefix) format('Embedded-opentype'); /For Internet Explorer browsers/ src: local("sans-pro"), url(font/source-sans-pro/Sourcesanspro-Regular.ttf); font-Weight: normal; font-style: normal; } The only thing you need to do is to copy the ttf source in eot format. Use this site for this: https://onlinefontconverter.com/

  • André, I’m using Chrome, but after your tip I converted the source on the site indicated, I used the suggested code, I also tested on IE and Mozilla but nothing happened. I thought there might be some error in my code, but when testing with another source (cursive, Rial, times...) works normally.

0

Hello, I think the problem is not related to the source location, because otherwise this code:

src: url("font/source-sans-pro/SourceSansPro-Regular.ttf");

Already mentioned above would work. I think the problem is related to blocking access to that file through the server, by chance did not touch the blocking pages???

Also try accessing ttf file by browser to check for this type of example error: 

localhost/CodeNumberOne/css/font/source-sans-pro/SourceSansPro-Regular.ttf

I hope I’ve helped

Browser other questions tagged html css html5 css-font-face font

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