Custom font in html / css does not work

Question

Custom font in html / css does not work

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

2

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

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

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

I'm using windows7 and wampserver.

follows the location of the source:

html html5 css css-font-face font

asked by anonymous 16.04.2016 / 01:35

4 answers

How to sort from what has more records to what has less Doubt with Array in C # returning data in Json

score 1 · Answer 1

Would not it 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 within 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 any way you like by Google Fonts >

score 0 · Answer 2

0

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

or so

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

16.04.2016 / 01:48

score 0 · Answer 3

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 the blocking access to that file through the server, did not happen to move the lock pages ???

Also try to access the ttf file through the browser to check this type of error example:

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

I hope I have helped

score 0 · Answer 4

I was able to run the font installed on the PC, but it was necessary to put the code on the css page and the main page. See:

NO 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>

NO CSS:

Then, in CSS, just call the fonts normally. Rely on the Google API is muchooooo simpler! Very much! However, you are dependent on their server (though I think it will NEVER give you a hehehe problem).