In this post, we are going to explore open source fonts and CSS pre-processing.
I am going to give you an easy way to add web fonts to any website in just a few lines of code.
What are Google Fonts?
- Jan 17, 2018 Google Fonts. Google Fonts is a library filled with thousands of awesome (and free 😋 ) fonts. Talking of free: Always be careful when using a font online, sometimes the license doesn't allow it to be used online or for commercial use, or you may have to buy a license. Luckily all the fonts on Google Fonts are completely free, so you don.
- Mar 08, 2018 In order for Google Fonts to work on your website, you must have both the font family linked to the Google Fonts API (in the HTML) and you must have the font family specified (in the CSS). 7) Add different font weights and styles if you wish by clicking the 'customize' tab.
- Load custom fonts with CSS. In your creative's CSS file, add the @font-face rule before any other styles. For simplicity, this example uses only a truetype font file. To maximize browser compatibility, you should also include WOFF or EOT font file sources. Learn more about font-face browser support from CSS-Tricks.
- Next, you'll apply these fonts to specific CSS selectors on your HubSpot stylesheet using the CSS rules to specify families from Google Fonts. Add Google Font to your HubSpot pages. In your HubSpot account, locate the stylesheet applied to your pages and open the file in your design manager. Paste the @import code onto the first line of your.
In order for Google Fonts to work on your website, you must have both the font family linked to the Google Fonts API (in the HTML) and you must have the font family specified (in the CSS). 7) Add different font weights and styles if you wish by clicking the 'customize' tab.
Google Fonts makes it quick and easy for everyone to use web fonts.
Google Fonts is a collection of open source fonts that are hosted on Google's servers and with their API, it is easy for anyone to integrate their fonts into any web project. Best of all, it's free. (To learn more and explore the hundreds of fonts available, check out the Google Fonts website.)
What is SASS?
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass is a pre-processing language with features extending regular CSS, like variables, nesting, imports, mixing and more. Many frameworks are built with Sass, including Foundation, Susy, Compass, and many more.
To learn more about using Sass in your projects, check out WebdesignerDepot's Beginner's guide to Sass.
Using them together
Now that you have a basic understanding of Google Fonts and Sass, it's time to learn how to use the two together.
Pick your font(s)
The first step is to choose your font. Explore the Google Fonts website and when you decide on a font, click the 'Add to Collection' button.
Once you have all of your desired fonts for your website, click the 'Use' button on the bottom right of the page.
Next, pick out your desired font weights and character sets. Only select the items you need, as too many weights and sets can slow down your website. Keep this page open, because in the next step you are going to use the code in items 3 and 4 (Adding code, and integrating the fonts).
Sass variables
A variable in Sass is created with a $ symbol and can be reused in your styling.
When the Sass file is processed, it replaces the defined variables with the appropriate CSS. This is a simple example, but with bigger projects it becomes really helpful to keep everything consistent.
Now that we have a basic understanding of variables, we are going import the Google Font stylesheet, create a variable for each font, and use the fonts in our styling:
Conclusion
Here are a few things to remember:
- Only import the weights and character sets you need.
- Make sure your font weights are defined in the import function and in your Sass.
- Use the @import function not the Standard. Linking the stylesheet in your HTML will cause your website to make more requests and you will be missing out on the power of pre-processing.
- Create a system that makes sense to you. If you need to change the font family or weight, you need to create a simple structure that is easy to make your way back to.
- Always compress your outputted CSS. You should never have to reference the CSS files while coding, because all of your work should be done in Sass. Compressed CSS will give you the smallest file size and a faster website.
I hope you found this helpful for using these two tools together. Remember, this is just an example of how to implement these two systems together.
To download free fonts, check out our friends at UrbanFonts.com
Learn how to change the way text appears on a website, and learn how to use the most extensive and powerful free font database in the world!
Hey everyone! Welcome back to another year of Code The Web! Hopefully, you had a good New Year's, and have made some good resolutions for 2018…
Today I'm going to be talking about text-related CSS properties, as well as how to spice up your website with this nifty thing called Google Fonts.
Let's get going!
Getting started
I recommend following along in all of my tutorials, as it really helps you get a better grasp on the subject. If you want to follow along through this tutorial, here's how to get started.
First, create a new project folder with blank index.html and style.css files inside.
Next, let's write some basic HTML to test our font properties on. Add the following to your index.html:
Open your index.html file in a browser - it should look something like this:
Now we're good to go!
font-size
You may already know about font-size because it is a very common property, but I'll go through it anyway (you can skip if you want).
font-size is quite straight-forward, it determines the size of the text. It accepts a value in any CSS unit. Let's try it out!
Open up your style.css file, and style the to have a font-size of 50px - see if you can work out the code on your own…
Here is the result:
font-weight
font-weight sets the thickness of the text (eg. bold). It takes the following values:
lighternormalboldbolder- One of the following numbers:
100,200,300,400,500,600,700,800,900
The numbers go from 100 being the thinnest to 900 being the thickest. 400 is equivalent to normal and 700 is equivalent to bold. Note that the numbers do not have a unit after them.
Let's try making our font lighter - add the following to your CSS file:
Result:
What?! Nothing happened! This is because not all fonts come with all weights. This is because the designer of the font needs to design each weight of the font individually, and lots of font designers will not end up designing up to 9 versions of the same font. In this case, the designer of this font has not made a lighter version - so the browser just shows the closest equivalent which is normal.
In my next article, I'll go into the behind-the-scenes of how the different font weight files are actually specified.
Okay, let's try making our text bold - the designer of this font has made a bold version…
Result:
Woo! Let's move on…
line-height
line-height basically controls how high each line of text is. The larger the line-height, the more vertical space between the text.
Like font-size, line-height accepts a value in any CSS unit. Let's try it out!
First of all, let's split our text onto two lines so we can see the line-height properly by adding a
Result:
Now, let's try setting our line-height to 200px:
Now, take a look at the result:
As you can see, there is now much more space between the lines of text.
But you may be wondering - how does the line height create more space between the lines? This is because technically, there is no space between the lines. The lines are each 200px high, and the text is vertically centered on the lines. This means that as the line-height gets bigger but the font-size stays the same, the gaps between the actual text will get bigger. Here is a diagram:
line-height works well when using em units because it means you can set the line-height relative to the font-size. For example, line-height: 2em would make the line-height double the size of the text.
letter-spacing
letter-spacing determines the amount of space in between each letter and takes a value in any CSS unit. Let's jump right in and try it out!
Try giving the text a letter-spacing of 5px… https://downpfile332.weebly.com/lord-of-the-rings-slot-machine-strategy.html.
Here's the result:
Google Fonts Css Stylesheet
As you can see, the letters are much more spread out. This example looks kind of ridiculously spread out to make the letter-spacing clear, but often it is good for minor adjustments (similar thing goes for line-height).
font-family
The font-family tells the browser which font to display the text in. Here are the default fonts available:
- serif
- sans-serif
- cursive
- fantasy
- monospace
Let's try setting our font to fantasy (don't ask me why it is called that):
Here is the result:
Awesome! Air magic 1 0 0 7143.
Note that the default fonts might be different on different computers or browsers because it is what the browser deems to be the default font for that category. Generally, the fonts will look similar though.
Google Fonts Css Link
You can also specify any font name that is installed on the computer system (if the font name contains a space, surround it with quotes eg. font-family: 'Modern Sans'). The problem is, the font will not work if it is not installed on the user's machine. This is where Google Fonts comes in…
Google Fonts
Google Fonts is a library filled with thousands of awesome (and free 😋 ) fonts.
Talking of free: Always be careful when using a font online, sometimes the license doesn't allow it to be used online or for commercial use, or you may have to buy a license. Luckily all the fonts on Google Fonts are completely free, so you don't have to worry!
The good thing about using a font from Google Fonts is that they host and create a font stylesheet for you. This means that all you need to do is link to one of their files and the font will work for everyone - even if the user doesn't have it installed on their computer.
Let's add a font from Google Fonts to our website!
First of all, go to the Google Fonts website if you haven't already. When you get there, you will see a bunch of font specimens:
Sun bingo on line. There is also a search box and many advanced filters to find your favorite font - you can even filter by things such as thickness or width!
In this case, I have chosen the font Ribeye Marrow. You can either follow along with me using that font or pick your own.
Once you have a font, click the red plus button - the image below shows how to do it on a specific font page or straight from the home page:
After doing this, a small panel will appear in the bottom right corner of your screen:
Open it by clicking on it…
First of all, we will need to link to the font so that the browser knows where to find the files. There are two ways to do this: using HTML (standard) or CSS (@import). Personally, I prefer CSS as the font is part of the styling of the page so it makes sense to put it together.
To use the CSS option, click on '@IMPORT'
Next, copy the middle line of code (the one with @import in it):
Now, we need to paste it into our CSS code - but where? @import statements must always be outside of the curly brackets, but it really doesn't matter where in the document - as long as it is above the place where the font is used (the font-family property). As a general rule, I like to put Google Font imports at the top of CSS files so that the rest of the CSS file has access to it.
I'll explain more about CSS @imports in another article.
Let's paste in our line of code:
Reload the page - you will see that nothing has changed! This is because we still need to declare the font using font-family. The reason for using the @import line is so that the font will work even if it is not installed on the user's computer.
Let's use our font! We simply do this by giving the name of the font as a value to the font-family property:
Remember to include quotation marks if the name has a space!
Here is the result:
Now our text is in the font Ribeye Marrow!
Conclusion
Woo! That's it for today! Hopefully, this article was useful and helped you along your coding journey. As always, if there was anything that you didn't get or if you have any feedback, tell me in the comments.
Also, these articles don't come out of thin air! Looking at my Pomodoro Timer, so far I've spent 3 hours and 20 minutes on this article, and have just passed to 40,000 word mark on this blog!
While your nice comments and knowing that I am helping you all make it worthwhile, I'd really appreciate it if you shared this or this blog with your friends or signed up to the newsletter to get the latest articles in your inbox.
See you next time, where I'll be talking about using custom font files to extend your font choices beyond Google Fonts. See you then! Have a great and productive 2018 filled with lots of coding fun! 🙌 🎆 🚀
