Difference between revisions of "How to load custom fonts locally in Swift Theme"
(Created page with "Swift gives you option to select from over 600 fonts available on [google fonts https://www.google.com/fonts], but for whatever reason if you choose to use a font you download...") |
|||
| Line 5: | Line 5: | ||
===Getting the font=== | ===Getting the font=== | ||
You can download the Lato web fonts directly from [latofonts.com http://www.latofonts.com/lato-free-fonts/] | You can download the Lato web fonts directly from [latofonts.com http://www.latofonts.com/lato-free-fonts/] | ||
| + | When using custom fonts, you should atlas have the bold and italic variants of the font. | ||
| + | |||
| + | ===Preparing the fonts=== | ||
| + | Convert the three font weights into web fonts using this [convertor http://www.fontsquirrel.com/tools/webfont-generator] | ||
| + | |||
| + | In the downloaded file you will have a file named '''stylesheet.css''' with the following content | ||
| + | ` | ||
| + | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 4, 2015 */ | ||
| + | |||
| + | @font-face { | ||
| + | font-family: 'latobold'; | ||
| + | src: url('lato-bold-webfont.eot'); | ||
| + | src: url('lato-bold-webfont.eot?#iefix') format('embedded-opentype'), | ||
| + | url('lato-bold-webfont.woff2') format('woff2'), | ||
| + | url('lato-bold-webfont.woff') format('woff'), | ||
| + | url('lato-bold-webfont.ttf') format('truetype'), | ||
| + | url('lato-bold-webfont.svg#latobold') format('svg'); | ||
| + | font-weight: normal; | ||
| + | font-style: normal; | ||
| + | |||
| + | } | ||
| + | @font-face { | ||
| + | font-family: 'latoitalic'; | ||
| + | src: url('lato-italic-webfont.eot'); | ||
| + | src: url('lato-italic-webfont.eot?#iefix') format('embedded-opentype'), | ||
| + | url('lato-italic-webfont.woff2') format('woff2'), | ||
| + | url('lato-italic-webfont.woff') format('woff'), | ||
| + | url('lato-italic-webfont.ttf') format('truetype'), | ||
| + | url('lato-italic-webfont.svg#latoitalic') format('svg'); | ||
| + | font-weight: normal; | ||
| + | font-style: normal; | ||
| + | |||
| + | } | ||
| + | @font-face { | ||
| + | font-family: 'latoregular'; | ||
| + | src: url('lato-regular-webfont.eot'); | ||
| + | src: url('lato-regular-webfont.eot?#iefix') format('embedded-opentype'), | ||
| + | url('lato-regular-webfont.woff2') format('woff2'), | ||
| + | url('lato-regular-webfont.woff') format('woff'), | ||
| + | url('lato-regular-webfont.ttf') format('truetype'), | ||
| + | url('lato-regular-webfont.svg#latoregular') format('svg'); | ||
| + | font-weight: normal; | ||
| + | font-style: normal; | ||
| + | } | ||
| + | ` | ||
Revision as of 12:20, 4 October 2015
Swift gives you option to select from over 600 fonts available on [google fonts https://www.google.com/fonts], but for whatever reason if you choose to use a font you downloaded form other source or just want to load the google fonts locally from your server. Then this tutorial is for you.
In this tutorial we will show you how to load the Lato font locally.
Getting the font
You can download the Lato web fonts directly from [latofonts.com http://www.latofonts.com/lato-free-fonts/] When using custom fonts, you should atlas have the bold and italic variants of the font.
Preparing the fonts
Convert the three font weights into web fonts using this [convertor http://www.fontsquirrel.com/tools/webfont-generator]
In the downloaded file you will have a file named stylesheet.css with the following content ` /* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 4, 2015 */
@font-face {
font-family: 'latobold';
src: url('lato-bold-webfont.eot');
src: url('lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('lato-bold-webfont.woff2') format('woff2'),
url('lato-bold-webfont.woff') format('woff'),
url('lato-bold-webfont.ttf') format('truetype'),
url('lato-bold-webfont.svg#latobold') format('svg');
font-weight: normal;
font-style: normal;
} @font-face {
font-family: 'latoitalic';
src: url('lato-italic-webfont.eot');
src: url('lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('lato-italic-webfont.woff2') format('woff2'),
url('lato-italic-webfont.woff') format('woff'),
url('lato-italic-webfont.ttf') format('truetype'),
url('lato-italic-webfont.svg#latoitalic') format('svg');
font-weight: normal;
font-style: normal;
} @font-face {
font-family: 'latoregular';
src: url('lato-regular-webfont.eot');
src: url('lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lato-regular-webfont.woff2') format('woff2'),
url('lato-regular-webfont.woff') format('woff'),
url('lato-regular-webfont.ttf') format('truetype'),
url('lato-regular-webfont.svg#latoregular') format('svg');
font-weight: normal;
font-style: normal;
} `
