Making sure your website matches your brand and home style is very important for anyone working on their website. Despite this, most website builders and other website platforms have limited font options, which makes it difficult to achieve the consistent branding you’ve been dreaming of.
So, how exactly can you make your website reflect the style you have carefully designed? @font-face and CSS is the answer to that question, and we’ll show you exactly how to change your website’s fonts with these tools.
Why you should use CSS @font-face on your website
Before diving into the gist of this process, it makes sense to explore the reasons for using this method to apply custom fonts to your website. @font-face comes with a range of different benefits, making it an excellent choice for beginners and web design experts alike.
- easy to use: You don’t need to be able to write CSS from memory to use rules like this. This makes it easy for anyone to add a font to their website in this way, all without having to rely on plugins or extensions.
- light and fast: Using @font-face does not add another CDN connection to your website, as the font files are hosted on your server. This means that your CSS rules and font files will be cached for the rest of your website.
- diversified capabilities: Almost any font can be used with @font-face , and it gives you a huge range of options when it comes to controlling the way a new font appears by default when you use it.
How to use CSS @font-face to load custom fonts
Using @font-face rules on your websites is not difficult at all. There are plenty of tools around the web that can help you with that, and we’ll show you each of the steps you’ll need to take to get a new streak online.
1. Find your font
It all starts with some searching for fonts. You need to find the font you want and it will work on your website, and there are plenty of places to look when you get close to this. Of course, though, you can skip this step if you already have a font selected.
Websites like DaFont can be great for those looking for fonts that can be used commercially for free. This is where we found the font we use in this guide. it’s called Kaiju monster for Goma ShinIt comes with a 100% free commercial license which means it can be used on any website.
Besides DaFont, there are plenty of other free font sites on the web. If you have an example of a font but don’t know its name, you can use Font Squirrel’s font selector to find fonts inside an image. This doesn’t always work, but it can be a great way to find similar fonts all over the web.
If you’re looking for more inspiration, check out our guide on how to find free fonts that are similar to paid ones.
2. Convert your font into a web font
Once you download your font files, it’s time to convert your font into a format that your website will be able to display. Besides the ability to select fonts, Font Squirrel also has a tool to convert fonts to web font packages. Go to this page and follow the steps below to convert your font.
-
Decompress your font.
-
Click download font Select the font you are converting.
-
tap on text box To agree that you have permission to use the font.
-
click Download your toolkit And wait for the download to start.
-
Unzip the new font file.
3. Upload your web font to your website
Now that your font has been downloaded, it’s time to add it to the file directory that stores your live website. This will usually be on your web server, and you can use either an FTP client like FileZilla or the tools that come on your web server to add the files. We will use the last method for this.
The site we do this is a WordPress site. This means that there is already a file called wp-content which is perfect for our font, and we can start from here.
Go to the root directory in your website files and find a suitable place for your font (for WordPress we used files public_html > wp-content > and create a file called fonts). Then upload a file .woff and .woff files woff2 that comes with your Webfont package.
4. Add the @font-face rule to your CSS
The next step is perhaps the most difficult component of this process. Font Squirrel provides a sample @font-face base with the folder you downloaded, this can be found by Open the stylesheet.css file inside.
As you can see, this rule is almost complete, but it does not include the location of our file. This can be a little tricky, as you don’t need to include the entire file path to get the job done. In our case, we just need to add /wp-content/fonts/ to our @font-face rule, where the user will already be outside the root file of our website when the CSS is loaded.
You can see what makes the rules look like above.
Finally, it’s time to add the @font-face rule to your website’s CSS. Since we are using WordPress, we will do so through our site customizer. Most modern website platforms offer custom CSS options, although you can also add this rule directly to the CSS file on your website.
important note: We usually provide sample code at this point in a manual. It is almost certain that the CSS code you will use will be different from ours, which means that you are better off using the CSS template provided by Font Squirrel.
5. Change your website fonts with Font-Family CSS rules
As a final stage in the process, you need to add new CSS rules to all the text you want to add the new font to. We showed you how to find CSS classes and identifiers for specific text elements on your website in our recent article on changing font colors with CSS.
Once you know which class or ID you are working with, you can add this to your CSS file. In our case, we’ll change the body text on one of our pages.
Add the class name followed by a set of curly braces (our example – .siteorigin-widget-tinymce p {}). Next, add the font family rule above the @font-face CSS group to the class you just made. Next, check to make sure the font has changed.
If your font doesn’t change, you may have misspelled the CSS class name, or there may be another rule getting in the way. Using a browser development inspector can be a good way to determine what is preventing CSS from working.
Other ways to download new website fonts
Using @font-face isn’t the only way to add new fonts to your website. Companies like Google host their own font libraries, allowing you to download fonts from a CDN instead of your own website. Options like these can be faster and easier, but they also come with some downsides.
@font-face is a powerful and reliable way to change fonts on a website, giving you everything you need to force you to rely on services offered by other companies.
read the following
About the author
