Documentation › Advanced: Using Custom Fonts

Advanced: Using Custom Fonts

As promised in the video, here’s the code I used in the Live CSS Editor

@font-face {
font-family: 'aleoregular';
src: url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.eot');
src: url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.woff') format('woff'),
url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.ttf') format('truetype'),
url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.svg#aleoregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'aleolight';
src: url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.eot');
src: url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.woff') format('woff'),
url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.ttf') format('truetype'),
url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.svg#aleolight') format('svg');
font-weight: normal;
font-style: normal;
}
body {font-family: "aleoregular";}
h2 {font-family: "aleolight";}

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress