Use fonts other than Google Fonts
SPECIAL NOTE: If the webfont is already being loaded by your theme, skip to Part 2 below.
Part 1
For the purposes of this article, we’ll use Open Sans from FontSquirell. After visiting that link, click the “Webfont Kit” tab, and then click the “Download @font-face kit” button:
Next, unzip the downloaded file, and then open the html file named “How_to_use_web_fonts.html”, and review the information in this document.
Next, click the download’s “webfont” folder, and then click on the “opensans_bold_macroman” folder. Inside this folder, you’ll see the following font files:
Next, using an ftp program, upload the fonts to your website. For this example, we’ll create a new directory called “webfonts” inside the “wp-content” directory. So the fonts would be uploaded via ftp here:
wp-content/webfonts/
Next, open the “stylesheet.css” file in a text editor:
and modify the urls to be absolute, so they’re loaded from the “wp-content/webfonts/” directory. Here’s an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@font-face { font-family: 'open_sansbold'; src: url('https://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot'); src: url('https://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('https://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.woff') format('woff'), url('https://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.ttf') format('truetype'), url('https://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } |
Next, copy this CSS to your computer’s clipboard, and paste it into the slider’s Custom CSS section:
Part 2
Next, edit a Text Layer, and manually type the font-family name into the “Style” section for the Layer: