How to use font-face on a local server (xampp)?

Question

How to use font-face on a local server (xampp)?

4.3k views Asked by EclipticalD At 18 June 2015 at 07:34

I'm experimenting with custom fonts using font-face and a local font I have on my computer.

I'm using XAMPP for local server and Dreamweaver as the IDE (not sure it matters, though I "managed" my fonts there and added the font I'm trying to use).

Anyways, I keep getting the following "error" from the browser console when trying to see my test: "unknown property name" for the font-family on an h1 element I'm trying this thing on.

Here's some code I did about it, maybe I got something wrong?

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Prueba: Importando Fuentes</title>

    <style type="text/css">

    @font-face
    {
        font-family: 'origami';
        src:url("http://localhost/Laboratorio%20de%20Pruebas/Mayo/Fonts/fonts/fonts/origami_making.ttf");           
        font-weight:normal;             
    }

    h1
    {
        font-familiy: 'origami', sans-serif;    
    }

    h2
    {
        font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;   
    }

    </style>
</head>

<body>

    <h1>ORIGAMI</h1>
    <h2>IMPACT</h2>

</body>
</html>

Original Q&A

There are 1 answers

**Junaid** · Accepted Answer · 2015-06-18 07:40:50

I am pretty sure you need origami_making.eot as well, and use relative urls. example

@font-face {
 font-family: "Flaticon";
 src: url("flaticon.eot");
 src: url("flaticon.eot#iefix") format("embedded-opentype"),
 url("flaticon.woff") format("woff"),
 url("flaticon.ttf") format("truetype"),
 url("flaticon.svg") format("svg");
 font-weight: normal;
 font-style: normal;
}

TechQA.

How to use font-face on a local server (xampp)?

There are 1 answers

Related Questions in CSS

Related Questions in FONTS

Related Questions in XAMPP

Related Questions in FONT-FACE

Popular Questions

Popular Tags

Trending Questions