The ability to customize and personalize your career site through our Career site editor gives you full control of how your career site will look like.
Most of the elements you can add, edit, reorganize through our simple CMS, as for others, you can use the Custom CSS and Custom Javascript options to customize and brand your career site.
By using the Custom CSS or JS option, you will be able to change or add elements to your career site, with only a few lines of code.
NOTE: The only prerequisite is that you have some programming knowledge, or you can ask your developers or programmers for help. 😊
One of the things that you can add to your career site is the custom font. Through our editor, you can select from one of many different fonts that can be applied to your site. For other fonts, that are not available through the TalentLyft editor, you can add them with Custom CSS.
NOTE: Please keep in mind that you will need to allow external hosts to access the fonts.
In this case our career sites. It is because web fonts are subject to Cross-Origin Resource Sharing (CORS)
In the following example, we will show you how to add a new font to your career site, using custom CSS.
The whole list of commands will look similar to this:
@font-face { font-family: 'My Font'; src: url(https://my-site.com/fonts/my_font.eot); src: url(https://my-site.com/fonts/my_font.woff2) format("woff2"), url(https://my-site.com/fonts/my_font.woff) format("woff"), url(https://my-site.com/fonts/my_font.otf#iefix) format("embedded-opentype"), url(https://my-site.com/fonts/my_font.otf) format("opentype"), url(https://my-site.com/fonts/my_font.svg) format("svg"), url(https://my-site.com/fonts/my_font.ttf) format("truetype"); font-style: normal; font-weight: 300;}body, .wrapper__header__main, .content.application-form-container, button, .btn, .header, .content {
font-family: 'My Font' !important;
}Here is the explanation for each section of the code:
@font-face – defines several things. Firstly, each font-face declaration defines one font. If you want to upload fonts for different font weight and font-style (normal or italic), you will need to have several sections, like the first one, only with different weight and style.
first src property – defines a fallback for older browsers and it should always have a link to .eot file
src: url(https://my-site.com/fonts/my_font.eot)second src property – enables the import of the list of URLs that point to different types of font. This item is defined as a combination of an URL and a description type.
src: url(https://my-site.com/fonts/my_font.woff2) format("woff2"), url(https://my-site.com/fonts/my_font.woff) format("woff"), url(https://my-site.com/fonts/my_font?#iefix) format("embedded-opentype"), url(https://my-site.com/fonts/my_font.otf) format("opentype"), url(https://my-site.com/fonts/my_font.svg) format("svg"), url(https://my-site.com/fonts/my_font.ttf) format("truetype");
The logic for this is that the internet browser will go over the list and the first item that it is able to download, and that is supported by the browser, will be used and it won’t go over other types. That is why the items on the list should be ordered from best to worst, in other words: woff2, woff, embedded-opentype, opentype, svg, truetype.
NOTE: Your font doesn’t need to have all these types. It depends on where you acquired it or who delivered it, but it is important to have all the available types listed by quality. The URLs are absolute, that means that your fonts can be stored anywhere on your server/content delivery network.font-style – this property defines the font style (normal, italic,…), similar like font-weight defines the thickness of the font.
font-style: normal;
font-weight: 600;font-family – defines the name under which the font will be used after it is loaded. After you define the font and its variations (weight and style), you need to apply it to the site itself with the following command:
body, .wrapper__header__main, .content.application-form-container, button, .btn, .header, .content {
font-family: 'My Font' !important;
}
For this example, we will be applying the font with the named font to the elements with class: header or content, which is needed to apply the font throughout the whole career site.