<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="mycard">
<!-- Header -->
<div id="mycard--header">
<h1 id="title">
Font<span id="title--bold-part">Selector<sup>3.0</sup></span>
</h1>
</div>
<!-- Body -->
<div id="mycard--body">
<div class="row pb-3">
<div class="col-sm-12">
<form>
<div class="row">
<div class="col-sm-8">
<input type="text" id="user-text" class="form-control" placeholder="Type your text here...">
</div>
<div id="user-select" class="col-sm-4">
<!-- Select -->
</div>
</div>
</form>
</div>
</div>
<div class="row pt-3">
<div class="col-sm-12">
<button type="button" class="btn btn-default mr-2" id="btn-love">
<i class="far fa-heart"></i> Love this font
</button>
<button type="button" class="btn btn-default" id="btn-use" data-toggle="modal" data-target="#usefontModal">
<i class="far fa-file-code"></i> Use on my website
</button>
</div>
</div>
</div>
</div>
<!-- Modal 'use this font' -->
<div class="modal fade" id="usefontModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<!-- header -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Use this font</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- body -->
<div class="modal-body">
<div class="input-group">
<input type="text" class="form-control" id='link-input'>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="link-btn"
data-toggle="tooltip" data-placement="bottom" title="Copy to clipboard">
<i class="far fa-clipboard"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
/********** Imports **********/
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v16/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v16/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}
/********** Variables **********/
/* Colors */
/********** Mixins **********/
/********** Init **********/
html,
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
/********** Card **********/
#mycard {
display: block;
width: 75%;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 20px 0 rgba(119, 119, 119, 0.4);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Size */
/* Header */
/* Body */
}
@media (max-width: 1300px) {
#mycard {
width: 80%;
}
}
@media (max-width: 1000px) {
#mycard {
width: 85%;
}
}
#mycard--header {
background: #112b88;
color: #FCFBFC;
padding: 70px 55px 10px 55px;
/* title */
}
#mycard--header #title {
font-weight: 300;
}
#mycard--header #title--bold-part {
font-weight: 600;
}
#mycard--body {
background: linear-gradient(180deg, #112b88 29px, #FCFBFC 29px);
padding: 10px 55px 40px 55px;
}
#mycard--body input,
#mycard--body select {
box-shadow: 0 2px 20px 0 rgba(119, 119, 119, 0.4);
}
/********** Buttons **********/
.btn-default {
background: #233b90;
color: #FCFBFC;
padding: 15px 20px;
}
.btn-default i {
color: #6878bb;
padding-right: 10px;
}
.btn-default:hover {
background: #2843a5;
color: #FCFBFC;
box-shadow: 0 0px 10px 0 rgba(119, 119, 119, 0.5);
}
$(document).ready(function() {
// ------------------------------
// Variables
// ------------------------------
var arrFonts = [
'Bangers', 'Barriecito', 'Bentham', 'Bowlby One SC',
'Cinzel Decorative', 'Courgette',
'Fredericka the Great',
'Julius Sans One',
'La Belle Aurore', 'Lato', 'Lobster', 'Lora', 'Lusitana',
'Niconne', 'Nixie One',
'Open Sans',
'Pacifico',
'Raleway', 'Roboto',
'Ubuntu'
];
var loadFonts = ['Open Sans'];
// ------------------------------
// Set select
// ------------------------------
var select = '<select id="user-font" class="form-control">';
for(var i = 0; i < arrFonts.length; i++) {
select += '<option value="' + arrFonts[i] + '"';
if(arrFonts[i] == 'Open Sans') {
select += ' selected';
}
select += '>' + arrFonts[i] + '</option>';
}
select += '</select>';
$('#user-select').html(select);
// ------------------------------
// Change font
// ------------------------------
$('#user-font').on('change', function() {
// load font
if(!loadFonts.includes($(this).val())) {
WebFont.load({
google: {
families: [$(this).val()]
}
});
loadFonts.push($(this).val());
}
// change font
$('#user-text').css('font-family', $(this).val());
});
// ------------------------------
// Love font
// ------------------------------
$('#btn-love').on('click', function() {
window.open('https://fonts.google.com/specimen/' + $('#user-font').val());
});
// ------------------------------
// Use font
// ------------------------------
$('#btn-use').on('click', function() {
var link = '<link href="https://fonts.googleapis.com/css?family=' + $('#user-font').val().replace(' ', '+') + '&display=swap" rel="stylesheet">';
$('#link-input').val(link);
});
$('#link-btn').on('click', function() {
$('#link-input').select();
document.execCommand('copy');
$('#link-input').addClass('is-valid');
});
$('#usefontModal').on('hidden.bs.modal', function() {
$('#link-input').removeClass('is-valid');
})
});
// Tooltips
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
