How to import fonts locally in css?

Asked

Viewed 96 times

0

I am developing a website and I am having difficulties in the issue of sources.

Locally they appear, I uploaded to the server of my files the site appears normally, however only the sources do not appear, I tried to do @font-face but it did not work.

How do I import a local source? Is it possible?

css css-font-face

  • You can please show how you import fonts; that is, you can put html or css where you import fonts

  • 1

    Is there an error in the Devtools Console? If so, which?

  • I was not knowing how to use @font-face so I posted here, I will try the solution proposed in the comments below as soon as I get home and reply back.

1 answer

2

Use the @font-face CSS is a good alternative. Assuming your project has the following structure:

site/
├── css/
│   └── styles.css
├─── fonts/
│   ├── Oxygen-Regular.eot
│   ├── Oxygen-Regular.svg
│   ├── Oxygen-Regular.ttf
│   ├── Oxygen-Regular.woff
│   └── Oxygen-Regular.woff2
└── index.html

To have good compatibility with current browsers, you will need to have at least the files .woff2 and .woff from its source (I am using as an example the source Oxygen). Copy them to the folder fonts and in your file styles.css, do:

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Regular.woff2') format('woff2');
    src: url('../fonts/Oxygen-Regular.woff') format('woff');
    font-weight: normal;
}

After this, just assign the source to some element, for example to the body:

body {
    font-family: 'Oxygen', sans-serif;
}

For maximum compatibility, including slightly older browsers, you will need the files .eot, .woff, .woff2, .ttf and .svg from its source. Hence it would look like this:

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Regular.eot');
    src: url('../fonts/Oxygen-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Oxygen-Regular.woff2') format('woff2'),
         url('../fonts/Oxygen-Regular.woff') format('woff'),
         url('../fonts/Oxygen-Regular.ttf') format('truetype'),
         url('../fonts/Oxygen-Regular.svg#oxygen') format('svg');
    font-weight: normal;
}

  • Thank you I will try to use your solution.

  • I must have put something wrong if I can check thank you, it didn’t work, copy and paste the links to better understand.

  • https://ibb.co/w7ZVPFC server structure https://ibb.co/1Zc7Vvc how I put the code https://ibb.co/6vW7HMS as I left and as I want

  • You need to use ../ and not ./, in addition to this, we had to update the font name to the format .svg in the second image. You also need to assign the source to the elements you want, as I did above for the body.

Browser other questions tagged css css-font-face

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