[Stephanie Davis]

I am using Adonis Pro to create a website but the fonts I need are not available on that theme.  How can I add Boston Angel, Lekton, and Sloop Script font families to my WordPress theme?  I need to be able to use them throughout the site.

[sujeet]

Hello Stephanie,

Since Lekhton is a google font, we have added that to our theme. You can see inside font family option once you get a theme update.

For other two custom fonts, please follow the instruction below:

-> How to add custom fonts to your website using @font-face

The @font-face CSS rule explained below is the most common approach for adding custom fonts to a website.

Step 1: Download the font

– Find the custom font you want to use on your website, and then download the TrueType Font file format (.ttf). You can also download the OpenType Font format (.otf)

Step 2: Create a WebFont Kit for cross-browsing

– Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.

Step 3: Upload the font files to your website

– Using your FTP or file manager, upload all the font files found within your Web Font Kit to your website.

Step 4: Update your CSS code which you will get inside the downloaded kit

– Open the CSS file in a text editor such as Textedit, NotePad or Sublime.

Replace the existing source URL with the new URL you created by uploading each file.

By default, the source URL location is set within the downloaded Web Font Kit. It needs to be replaced by the location on your server.

Here’s a quick example:

Before update:

@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}

After update:

@font-face {
font-family: "CustomFont";
src: url("https://yoursite.com/css/fonts/CustomFont.eot");
src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
}

Once you’ve updated the CSS code you need to add that in your Additional Css(Appearance->customize->additional css)

Step 5: Use the custom font in your CSS declarations

Now that your Cascading Style Sheet and font files are uploaded to your server, you can start using your custom font in your CSS declarations to help improve the look of the HTML.

Here is a quick example:

h1 {
font-family: 'CustomFont', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}

You also need to add this code to your Additional Css(Appearance->customize->additional css)

Please kindly let me know if you have any confusion. thank you.

Regards,
Sujeet

[Author]

Posts