Articles in this section

See more

Multiple fonts per fontset (Semplice 3)

  • Updated

FOR VERSION 3.0.9 OR EARLIER ONLY

To set up more than one font per font set, please follow the instructions below.
 

- Multiple self-hosted fonts per font set

Let’s say we have three fonts we want to use and host our self.

  • DockLight, this one we want to use for the menu

  • Maison Neue Bold, this one we want to use for headlines

  • Roboto, for our paragraphs

 

  1. Create the CSS for your first font, make sure to follow this format:
    http://pastebin.com/KLn1T8as

  2. Do the same for the second font and both CSS code one after another to the 'CSS Code' section of your font set.

  3. Now take a look at the different font weights.
    - Light, Regular, Semibold, Bold & Custom One
    Each font weight can be a different font, which allows you to use up to 10 different fonts per font set.
     

  4. Let’s start with adding the fonts to the different weights. We want to have Roboto for the paragraphs. Copy the font-family of Roboto (‘Roboto’) and paste it to the font weights name. In my case I want Roboto to be the Regular font weight, Regular italic, Semibold and Semibold italic. You are allowed to change the font weight value of each weight individually, but the default settings for pretty fine more me. Now every paragraph which get’s the weight from light to semibold italic will be Roboto.
     

  5. Copy and paste the font family of the other two fonts to different weights. I copied MasonNeueBold to 'Bold' & 'Bold italic'. DockLight to 'Custom One'. The default font weight value of 'Bold' for example is 700. If I want to add a non bold font to this weight, you can always change the font weight value and the font style.

  6. Save the font set.

 

- Multiple fonts from different web services

If you want to use multiple fonts from different web services per font set, make sure to follow the steps above. But instead of the CSS code, just add the link you get from your service, one after another.
 

- Mixing self-hosted and cloud fonts

In case you want to mix self-hosted fonts with fonts from a cloud service.

  1. Copy the CSS from your self-hosted font to a new file and save it a .css

  2. Upload the file to your server.

  3. Within your font set, paste a link to this CSS to the embed code section.
    <link rel="stylesheet" type="text/css" href="font.css">

  4. Add the code from your cloud service below the CSS and save the font set.

 

If you have trouble with the CSS code, make sure to check out the troubleshooting section at the end of this guide:

http://help.semplicelabs.com/customer/en/portal/articles/1819717-add-a-self-hosted-webfont

 
 

Related articles