Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem
Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Finder
          v2.0.0
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            Getting started
            
Web font(s)

          



          
          

            
This article outlines how Finder optimizes web font loading by implementing local font storage and preloading techniques. These practices are crucial for enhancing site performance and minimizing layout shifts during page load.

            
Preloading local web fonts

            
Finder stores local fonts in the assets/fonts folder and preloads them in the <head> section of the HTML document to ensure they are available as soon as the page begins to render:

            

              
              
<!-- Preloaded local web font (Inter) -->
<link rel="preload" href="assets/fonts/inter-variable-latin.woff2" as="font" type="font/woff2" crossorigin>

            

            
Referencing fonts in SCSS

            
The preloaded fonts are then referenced in the src/scss/fonts.scss file, which includes necessary @font-face rules:

            
// Custom web fonts

// latin
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

            
Downloading and implementing custom web fonts

            
To use a custom font from sources like Google Fonts, follow these steps to download and integrate the font locally:

            
    
              
  1. 
                Find the font on Google Fonts: Locate the necessary font on Google Fonts.
              
    2. 
              
  2. 
                Obtain the embed code: Click the "Get font" button, then "Get embed code". Select the font styles you need and copy the generated link.
              
    3. 
              
  3. 
                Download the font file:
                
      
                  
    • Paste the copied link into a new browser tab.
      • 
                  
    • Locate the .woff2 file links inside the @font-face rules.
      • 
                  
    • Open these links in new tabs and save the contents as .woff2 files.
      • 
                
    
              
    4. 
              
  4. 
                Store and reference the font locally:
                
      
                  
    • Place the downloaded .woff2 file(s) in the assets/fonts folder.
      • 
                  
    • Add references to these files in the src/scss/fonts.scss file, similar to the example provided above.
      • 
                
    
              
    5. 
            

            
Note: If the selected font is not variable, you must create a separate @font-face rule for each weight and style, similar to the setup seen in the Google Fonts API generated link.

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize