How to manually add CSS Fonts?« Back to Questions List

All CSS fonts for HTML such as Google fonts are supported by Export Kit but there are a few steps required to correctly include the desired font(s) in your HTML5 export.

NOTE: This tutorial assumes you are using Google fonts, but can apply to any CSS font library.

Step 1: Copy the "embed code"

Copy the embed code from Google Fonts - Quick Use, eg. Droid Sans:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Step 2: Click "Customize" in the Exports Panel

Select Custom HEAD, then paste the "embed code" from Step 1.

Step 3: Search and Replace Font Names

Because Export Kit uses CSS Fonts, you will be required to change your font name(s) in your .css file after you export to match Google Fonts.

Eg. Changing DroidSans to Droid Sans, you can do this quickly using Search & Replace in any text editor.
Added January 3, 2017 2:33 am

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

194 views
0 answers
Last Answered 3 months ago by admin

Categories

Recent Answers


Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.