Ascension comes with 3 built-in font pairs. This page will describe how to switch between them, customize the existing pairs or add new ones.

Switching between font pairs

You can switch between font pairs by simply loading a different one in the head portion of your page. By default, all pages are loading font-pair-1.min.css. If you want a different one of the 3 available, you just replace this:

						                
						                    <!-- Font pair. -->
						                    <link rel="stylesheet" href="assets/css/skins/font-pair-1.min.css">
						                
						            

with this:

						                
						                    <!-- Font pair. -->
						                    <link rel="stylesheet" href="assets/css/skins/font-pair-2.min.css">
						                
						            

or with this:

						                
						                    <!-- Font pair. -->
						                    <link rel="stylesheet" href="assets/css/skins/font-pair-3.min.css">
						                
						            

It's that easy. Just make sure you load the minified version of the file since it improves performance.

Editing an existing pair

To edit an existing pair you need to open the corresponding file, for example assets/css/skins/font-pair-1.min.css and make the necessary changes. However, since this is a minified file, you'll be having a hard time understanding the code inside it. That's why I recommend you work on the non-minified files, make your changes and then minify that file.

Now, once you open the non-minified file, here's what you do:

1. Search for the line where Google Fonts import happens.



						                    
						                        @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Lato:300,400,900");
						                    
						                

2. If you're loading Google Fonts, change the font names and variants with your own.
3. If you're using other fonts, load them appropriately (depends on what fonts you're using).
4. Search the rest of the CSS for all the old font name instances and change those to the new name. For example, this:



						                    
						                        font-family: 'Roboto', Arial, sans-serif;
						                    
						                

will become this:

						                    
						                        font-family: 'Merriweather', Arial, sans-serif;
						                    
						                

5. Minify the code you just edited using a tool like minifier.org and then copy the minified contents into the corresponding file with the extension .min.css.
6. Test in a browser to make sure you've made the changes correctly. If the new font you entered cannot be found, the page will fallback to using Arial.

Adding a new font pair

The simplest way to add a new font pair is to duplicate an existing one and edit that file. It's much easier then starting from scratch. If, however, you want to do that, follow these steps:

1. Create a new file inside assets/css/skins/ and call it font-pair-x.css, where x stands for the next number in line.
2. Add your styles by consulting the other font pairs and the HTML document.
3. Once you're done, minify the file and load it in the head section of your page, just like in the examples above.

If you're using the advanced workflow, here's how you can work with the font pairs.

Switching between font pairs

Go ahead and open the page you want to edit and change the Dark Matter variables at the top. For example, you would change this:

						                
						                    ---
page-title: Landing 1
page-description: The page description goes here
color-scheme-class: color-scheme-1
font-pair-class: font-pair-1
---
						                
						            

to this:

						                
						                    ---
page-title: Landing 1
page-description: The page description goes here
color-scheme-class: color-scheme-1
font-pair-class: font-pair-3
---
						                
						            

Editing an existing pair

To edit an existing font pair, do the following:

1. Navigate to src/assets/scss/skins/ and open the wanted .scss font pair file.
2. Find the line where the Google Fonts import happens:



						                    
						                        @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Lato:300,400,900");
						                    
						                

3. If you're loading Google Fonts, change the font names and variants with your own.
4. If you're using other fonts, load them appropriately (depends on what fonts you're using).
5. Open src/assets/scss/_settings.scss.
6. Depending on which file you edited previously, find the appropriate map that looks like this:



						                    
						                        // Default font pair.
						                        'fonts-1': (
						                            'font-stacks': (
						                                'stack-primary'  : "'Lato', Arial, sans-serif",
						                                'stack-secondary': "'Roboto', Arial, sans-serif"
						                            ),
						                            'type-scale': (
						                                -3: 0.354rem,
						                                -2: 0.5rem,
						                                -1: 0.88rem,
						                                0 : 1rem,
						                                1 : 1.414rem,
						                                2 : 1.999rem,
						                                3 : 2.827rem,
						                                4 : 3.998rem            
						                            ),
						                            'font-weights': (
						                                'light'      : 300,
						                                'regular'    : 400,
						                                'bold'       : 700,
						                                'black'      : 900            
						                            )
						                        ),
						                    
						                

7. Change the font family and any other information you might want.

Adding an existing pair

Adding a new pair consists of a few simple steps:

1. First, create a new Sass partial in src/assets/scss/skins/ and call it font-pair-x.scss, where x stands for the next number in line.
2. Add your styles by consulting the other font pairs and the HTML document.
3. Open src/assets/scss/_settings.scss.
4. Find the $font-pairs variable and add another entry in the array.
5. Call the new entry fonts-x, where x matches the x in the file name.
6. Copy one of the other entries contents, paste it inside the new one and edit the contents accordingly.
7. Open the HTML page you want to edit and change the Dark Matter variable at the top to the newly created font pair.