Including a truetype font to the HTML template

[datawe]

Hi together,

I’m trying to include our company font sansation.ttf to the template and it’s not working. Could you pls be so kind to help me with that problem before I get totally nuts?

Tnx a lot!

Mark

---

[Support]

Hello Mark, thanks for your purchase.

1) First generate modern format for webfont trough this website generator:
https://www.fontsquirrel.com/tools/webfont-generator

* This will guarantee your font works in all browsers.

2) Extract the fonts inside folder “/fonts” (the .woff, .woff2 and .ttf).

3) Add the code below in (css/custom.css):

/* Add here all your CSS customizations */
@font-face {
    font-family: 'sansation';
    src:url('fonts/sansation.woff') format('woff'),
        url('fonts/sansation.woff2') format('woff2'),
        url('fonts/sansation.ttf');
    font-weight: normal;
    font-style: normal;
}

/* OPTION 1 */
/* Change all text of website */
body {
	font-family: 'sansation';
}

/* OPTION 2 */
/* Change specific elements. You need to specify what elements */
/* For example change just Headings and links */
h1, h2, h3, h4, h5, h6, a {
	font-family: 'sansation';
}

* Note the comments.

Please, try that and let me know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[datawe]

Hi Rodrigo,

tnx for your excellend support. I already did the same changes, like you wrote above
and it didn’t work, but it showed me that I change the code in right way.

The problem was, that I tried the changes locally on my harddisk and not on a web-server.
After I uploaded the template on my web-space everything was fine and worked!

Tnx Mark

---

[Support]

Hello Mark,

Great that your issue is resolved!

If you need further assistance, feel free to contact us.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts