Is there a solution where I can access multiple font in CSS? - html

Question

I am working on project where user wants to selects a font from a list and the page font changes.
Now I have the name of the font, but CSS doesn't have access to all the fonts. Is there a way where I can have access to a lot of fonts i.e. Google Fonts, without importing or downloading it?

Answer 1

You could also use typekit's webfontloader: webfont.js to load fonts after each select change event:
const fontSelector = document.getElementById('fontSelector');
let loadedFonts = [];
//add font weights:
let fontWeights = ":400,400italic,700,700italic";
//load default font
loadFont('Arimo', fontWeights);
fontSelector.addEventListener("change", (e) => {
let fontFamily = e.currentTarget.value;
loadFont(fontFamily, fontWeights);
});
function loadFont(fontFamily, fontWeights){
if(loadedFonts.indexOf(fontFamily)=='-1'){
loadedFonts.push(fontFamily);
WebFont.load({
google: {
families: [fontFamily+fontWeights]
},
fontloading: function () {
document.body.style.fontFamily = fontFamily;
}
});
}else{
console.log(fontFamily + 'already loaded')
document.body.style.fontFamily = fontFamily;
}
}
<select id="fontSelector">
<option>Arimo</option>
<option>Barlow</option>
<option>Bitter</option>
<option>Source Sans Pro</option>
<option>Merriweather</option>
</select>
<h1>Hamburgefons</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
The API is pretty straight forward:
WebFont.load({
google: {
families: ['Arimo']
},
fontloading: function () {
document.body.style.fontFamily = fontFamily;
}
});
In the above example we're loading the "Arimo" font-family.
We can run a callback function after the font has been loaded: Apply it via inline style to the document body.
This way you don't have to load lots of fonts on initial page load.
Even though a browser won't load the actual font files (only the ones that are currently applied to DOM elements) – the css will be quite big due to a lot of #font-face rules.

Answer 2

Here is an example using just jquery/css...I am only linking to a stylesheet.You can request multiple families by just adding a pipe character in between. I also added the first few fonts, Arimo, Barlow, and Bitter without having to download the whole google font library. It grabs only what you ask it to grab in the stylesheet url.
http://fonts.googleapis.com/css?family=Arimo|Barlow|Bitter"
/*Simple Font Selector Control Demo using Google Fonts */
$("#fontSelector").on("change", function() {
$("#dFontSample").html($(this).val() + ": Your Sample Text");
$("body").css("font-family", $(this).val());
})
body {
font-family: 'Tangerine';
font-size: 32px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo|Barlow|Bitter|Open+Sans|Josefin+Slab|Arvo|Lato|Vollkorn|Abril+Fatface|Ubuntu|Old+Standard+TT|Lobster|Bevan|Berkshire+Swash">
<select id="fontSelector">
<option>Arimo</option>
<option>Barlow</option>
<option>Bitter</option>
<option>Inconsolata</option>
<option>Droid Sans</option>
<option>Open Sans</option>
<option>Josefin Slab</option>
<option>Arvo</option>
<option>Lato</option>
<option>Vollkorn</option>
<option>Abril Fatface</option>
<option>Ubuntu</option>
<option>Old Standard TT</option>
<option>Georgia</option>
<option>Arial Black</option>
<option>Times New Roman</option>
<option>Lobster</option>
<option>Bevan</option>
<option>Berkshire Swash</option>
</select>
<div id="dFontSample">Your sample text</div>