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

Question

I am working on project where user wants to selects a font from a list and the page font changes.

Font picker in react

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?

herrstrietzel · Answer

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;
  }
}


Hamburgefons
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

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.

Vzupo · Answer

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;
      }




Your sample text

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

2 Answers