How to use Custom Font

VideoPro allows users to change the default Main Font, Navigation FontMeta-Font and Heading Font to Custom Font with Font option in Theme Options > Color and Fonts

There are 2 ways to import a Custom Font, which are Using Google Fonts and Upload WOFF font file

1. Using Google Fonts

You can use a Custom Font from Google Fonts without uploading any font file.

  • To use this feature, you need to turn on Google Fonts option in Appearance > Theme Options > Color and Fonts > Google Font > ON
  • Go to https://fonts.google.com/ and Select your wanted font
    For Example : Titillium Web font
  • In CUSTOMIZE tab, you can choose the supported font-weight for the selected fonthow-to-use-custom-font-1
  • Back go EMBED tab and copy the font-family name and list of font-weighthow-to-use-custom-font
  • The value to be filled in Main Font Family field is FONT_FAMILY_NAME: LIST_OF_FONT_WEIGHT, so in this case, it would be Titillium: 400,700,900.how-to-use-custom-font-2
  • Save Changes and enjoy

    how-to-use-custom-font-9
    Main Font after changing to Titillium font

2. Using Custom Font

This option can help you to import a Custom Font which is not from Google Fonts

For Example, I have iCiel Cadena font in WOFF file type.

how-to-use-custom-font-4
iCiel Cadena Preview
  • There are 4 Custom Font for 4 kinds of font above to put in your uploaded font file
  • Paste the direct URL of your woff file into one of Custom Font fields (Please note that you need to choose the right field for woff or woff2)
    how-to-use-custom-font-6
  • Then fill the name of Custom Font field that you’ve uploaded into Main Font Family, in this case I uploaded to Custom Font 1 field, so the name to be filled is “custom-font-1”
    how-to-use-custom-font-7
  • Save Changes and enjoy

    how-to-use-custom-font-10
    Main font after changing to iCiel Cadena font