Light Dark

*to close search form press ESC or close toggle

Andale – Creative HTML5 Portfolio Template
Andale – Creative HTML5 Portfolio Template
44 Articles Version 1.0

You can change the fonts to those that you like. To do this, download the font, paste it into the fonts folder, and connect them using the fonts.css file. When you do this, change the variable –primary-font to the font you need. You can include the font using this code:

@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
}

Didn't find the answer to your question?

Let us help you find the solution you're looking for.

Submit a Ticket