top of page
Search

Import and use some major Wix fonts in HTML

Updated: Apr 26, 2022

If you create an embed in wix, it'll be nice thing to make every text go along with your website theme. So I've generated time from my life and researched all wix fonts (non-licensed), importing them and using them in HTML making it easy for you to match your website theme without any problem or time.


All including fonts:

Amatic Sc

/* heading link*/
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
</head>

/* Style*/
<style>
body{
font-family: 'Amatic SC', cursive;
}
</style>

Preview:

American Typewriter

/* heading link*/
<head>
<link href="https://db.onlinewebfonts.com/c/bf35ddaa105b41dd66cb2eb93424c588?family=American+Typewriter" rel="stylesheet" type="text/css"/>
</head>

/* Style*/
<style>
body{
font-family: 'American Typewriter', 'Courier New', Courier, monospace;
}
</style>

Preview:

Anton

/* heading link*/
<head>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>

/* Style*/
<style>
body{
font-family: 'Anton', sans-serif;
}
</style>

Preview:

Arial

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
body{
font-family: 'Arial';
}
</style>

Preview:

Arial Black

/* heading link*/
<head>
<link href="https://db.onlinewebfonts.com/c/8984ea7fcbebdcfe77fbbc1b86e7cfe6?family=Arial+Black" rel="stylesheet" type="text/css"/>
</head>

/*Style*/
<style>
body{
font-family: 'Arial Black', Arial, Helvetica, sans-serif;
}
</style>

Preview:

Assistant Light

/* heading link*/
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Assistant:wght@200&display=swap" rel="stylesheet">
</head>

/*Style*/
<style>
body{
font-family: 'Assistant', sans-serif;
}
</style>

Preview:

Assistant Semi Bold

/* heading link*/
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Assistant:wght@300;700&display=swap" rel="stylesheet">
</head>

/*Style*/
<style>
body{
font-family: 'Assistant', sans-serif;
}
</style>

Preview:

Avenida

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
    @font-face {font-family: "Avenida Std";
        src: url("https://db.onlinewebfonts.com/t/6d0da9e76b257a33dddd40fdd29ce075.eot"); /* IE9*/
        src: url("https://db.onlinewebfonts.com/t/6d0da9e76b257a33dddd40fdd29ce075.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("https://db.onlinewebfonts.com/t/6d0da9e76b257a33dddd40fdd29ce075.woff2") format("woff2"), /* chrome firefox */
        url("https://db.onlinewebfonts.com/t/6d0da9e76b257a33dddd40fdd29ce075.woff") format("woff"), /* chrome firefox */
        url("https://db.onlinewebfonts.com/t/6d0da9e76b257a33dddd40fdd29ce075.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
        url("https://db.onlinewebfonts.com/t/6d0da9e76b257a33dddd40fdd29ce075.svg#Avenida Std") format("svg"); /* iOS 4.1- */
    }
body{
font-family: 'Avenida Std', sans-serif;
}
</style>

Preview:

Bai Jamjuree

/* heading link*/
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;400&display=swap" rel="stylesheet">
</head>

/*Style*/
<style>
body{
    font-family: 'Bai Jamjuree', sans-serif;
}
</style>

Preview:

Basic

/* heading link*/
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;400&family=Barlow&family=Basic&display=swap" rel="stylesheet">
</head>

/*Style*/
<style>
body{
font-family: 'Basic', sans-serif;
}
</style>

Preview:

Belinda

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
body{
    @font-face {font-family: "BelindaW00-Regular";
    src: url("https://db.onlinewebfonts.com/t/f6a8b2423790ec81bbbd18662bbc7f03.eot");
    src: url("https://db.onlinewebfonts.com/t/f6a8b2423790ec81bbbd18662bbc7f03.eot?#iefix") format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/f6a8b2423790ec81bbbd18662bbc7f03.woff2") format("woff2"),
    url("https://db.onlinewebfonts.com/t/f6a8b2423790ec81bbbd18662bbc7f03.woff") format("woff"),
    url("https://db.onlinewebfonts.com/t/f6a8b2423790ec81bbbd18662bbc7f03.ttf") format("truetype"),
    url("https://db.onlinewebfonts.com/t/f6a8b2423790ec81bbbd18662bbc7f03.svg#BelindaW00-Regular") format("svg"); 
}
body{
font-family: 'BelindaW00-Regular', sans-serif;
}
}
</style>

Preivew:

Brandon Grotesque Regular

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
@font-face {font-family: "Brandon Grotesque Regular";
src: url("https://db.onlinewebfonts.com/t/544da55955a950deb15d6a7536c4da34.eot");
src: url("https://db.onlinewebfonts.com/t/544da55955a950deb15d6a7536c4da34.eot?#iefix") format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/544da55955a950deb15d6a7536c4da34.woff2") format("woff2"),
url("https://db.onlinewebfonts.com/t/544da55955a950deb15d6a7536c4da34.woff") format("woff"), url("//db.onlinewebfonts.com/t/544da55955a950deb15d6a7536c4da34.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/544da55955a950deb15d6a7536c4da34.svg#Brandon Grotesque Regular") format("svg"); }
body{
font-family: 'Brandon Grotesque Regular', sans-serif;
}
</style>

Preview:

Bree

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
@font-face {font-family: "Bree";
src: url("https://db.onlinewebfonts.com/t/d6d01c6fed7cd36a1b34c1cdb4f6d7eb.eot");
src: url("https://db.onlinewebfonts.com/t/d6d01c6fed7cd36a1b34c1cdb4f6d7eb.eot?#iefix") format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/d6d01c6fed7cd36a1b34c1cdb4f6d7eb.woff2") format("woff2"),
url("https//db.onlinewebfonts.com/t/d6d01c6fed7cd36a1b34c1cdb4f6d7eb.woff") format("woff"),
url("https://db.onlinewebfonts.com/t/d6d01c6fed7cd36a1b34c1cdb4f6d7eb.ttf") format("truetype"), 
url("https://db.onlinewebfonts.com/t/d6d01c6fed7cd36a1b34c1cdb4f6d7eb.svg#Bree") format("svg"); }
body{
font-family: 'Bree', sans-serif;
</style>

Preview:

Cudex

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
    @font-face {
        font-family: "Caudex";
        src: url("https://db.onlinewebfonts.com/t/fb933b6e9cdbb714e7c674c4cac5a7fe.eot");
        src: url("https://db.onlinewebfonts.com/t/fb933b6e9cdbb714e7c674c4cac5a7fe.eot?#iefix") format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/fb933b6e9cdbb714e7c674c4cac5a7fe.woff2") format("woff2"),
        url("https://db.onlinewebfonts.com/t/fb933b6e9cdbb714e7c674c4cac5a7fe.woff") format("woff"), 
        url("https://db.onlinewebfonts.com/t/fb933b6e9cdbb714e7c674c4cac5a7fe.ttf") format("truetype"), 
        url("htpps://db.onlinewebfonts.com/t/fb933b6e9cdbb714e7c674c4cac5a7fe.svg#Caudex") format("svg");
    }
body{
        font-family: 'Caudex', sans-serif;
</style>

Preview:

Damian

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
@font-face {font-family: "Damion";
src: url("https://db.onlinewebfonts.com/t/9693717d57aa92c4b726791cb6693df4.eot");
src: url("https://db.onlinewebfonts.com/t/9693717d57aa92c4b726791cb6693df4.eot?#iefix") format("embedded-opentype"),
url("https//db.onlinewebfonts.com/t/9693717d57aa92c4b726791cb6693df4.woff2") format("woff2"),
url("https://db.onlinewebfonts.com/t/9693717d57aa92c4b726791cb6693df4.woff") format("woff"),
url("https://db.onlinewebfonts.com/t/9693717d57aa92c4b726791cb6693df4.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/9693717d57aa92c4b726791cb6693df4.svg#Damion") format("svg"); 
}
body{
        font-family: 'Damion', cursive;
</style>

Preview:

Enriqueata

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
@font-face {font-family: "Enriqueta";
src: url("https://db.onlinewebfonts.com/t/4039e0e8d4b5d64ea7fd51e423437275.eot");
src: url("https://db.onlinewebfonts.com/t/4039e0e8d4b5d64ea7fd51e423437275.eot?#iefix") format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/4039e0e8d4b5d64ea7fd51e423437275.woff2") format("woff2"),
url("https://db.onlinewebfonts.com/t/4039e0e8d4b5d64ea7fd51e423437275.woff") format("woff"),
url("https://db.onlinewebfonts.com/t/4039e0e8d4b5d64ea7fd51e423437275.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/4039e0e8d4b5d64ea7fd51e423437275.svg#Enriqueta") format("svg");
}body{
        font-family: 'Enriqueta', sans-serif;
</style>

Preview:

Fraunces

/* heading link*/
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;400&family=Barlow&family=Basic&family=Damion&family=Fraunces:wght@100&display=swap" rel="stylesheet">
</head>

/*Style*/
<style>
body{
font-family: 'Fraunces', serif;
}
</style>

Preview:

Geotica Four Open

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
@font-face {font-family: "GeoticaW01-FourOpen";
src: url("https://db.onlinewebfonts.com/t/f50deaf3f2e2c69311cebdafbf7561d2.eot");
src: url("https://db.onlinewebfonts.com/t/f50deaf3f2e2c69311cebdafbf7561d2.eot?#iefix") format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/f50deaf3f2e2c69311cebdafbf7561d2.woff2") format("woff2"),
url("https://db.onlinewebfonts.com/t/f50deaf3f2e2c69311cebdafbf7561d2.woff") format("woff"),
url("https://db.onlinewebfonts.com/t/f50deaf3f2e2c69311cebdafbf7561d2.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/f50deaf3f2e2c69311cebdafbf7561d2.svg#GeoticaW01-FourOpen") format("svg");
}
    body {
font-family: 'GeoticaW01-FourOpen', serif;
</style>

Preview:

Heebo

/* heading link*/
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>

/*Style*/
<style>
    body {
font-family: 'Heebo', sans-serif;
</style>

Preview:

ITC Arecibo

/*No heading needed*/
<head>
</head>

/*Style*/
<style>
@font-face {font-family: "ITCAreciboW01-Regular";
src: url("https://db.onlinewebfonts.com/t/3cbe88dcaa68e0b025494513deb0f008.eot");
src: url("https://db.onlinewebfonts.com/t/3cbe88dcaa68e0b025494513deb0f008.eot?#iefix") format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/3cbe88dcaa68e0b025494513deb0f008.woff2") format("woff2"),
url("https://db.onlinewebfonts.com/t/3cbe88dcaa68e0b025494513deb0f008.woff") format("woff"),
url("https://db.onlinewebfonts.com/t/3cbe88dcaa68e0b025494513deb0f008.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/3cbe88dcaa68e0b025494513deb0f008.svg#ITCAreciboW01-Regular") format("svg");
}
    body {
font-family: 'ITCAreciboW01-Regular', sans-serif;
font-weight: lighter;
</style>

Preview:

Jockey One

/* heading link*/
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jockey+One&display=swap" rel="stylesheet">
</head>

/*Style*/
<style>
    body {
font-family: 'Jockey One', sans-serif;
font-weight:100;
</style>

Preview:

Kelly slab

/* heading link*/
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kelly+Slab&display=swap" rel="stylesheet">
</head>

/*Style*/
<style>
    body {
font-family: 'Kelly Slab', cursive;
</style>

Preview:

Lulo Clean

Preview:


Comments

bottom of page