Home
First topic message reminder :
| CHANGE YOUR WEBSITE'S FONT |
OverviewDescriptionThis tutorial shows how you can use fonts other than the standard bunch on your website. Arial, Veranda, Comic Sans - no more! This is an easy, yet important, one.InstallationFinding the fontFirst we will have to find the font we want to use. The world is the limit here, but for our purposes we will resort to one of the best sites out there: Google Fonts.I found Lato, a classic sans-serif font that looks good pretty much anywhere. Adding the font to your pageWhile viewing the font of your choice on Google Fonts, you will be presented with a list of different variants of that font. Some are bolder than others, while most have an italic version. Click the + Select this style next to each style you wish to use on your webpage.A panel will flow in from the right with all the information you need. Here you will have two options moving forward, either adding the font by adding some code to your HTML or adding the font by adding some code to your CSS. Adding the font through HTMLBy default, Google Fonts will present this option to you first. It will supply you with two pieces of code looking somewhat like the below.You need to reply to the topic in order to see the code resources So, firstly you will have to copy the first code and paste it between your
Now the font is loaded, but it is not applied to any content quite yet. To do that, you have to apply the second code to a CSS-class (ok I lied, there is some CSS in the HTML-way as well). If you for example want to apply the font to all text on your page, you could add the following to your CSS-file: You need to reply to the topic in order to see the code resources This could also be done for one specific class only, so that only certain text use Open Sans. Either way, that's it for the HTML-way! Adding the font through CSSWhile on Google Fonts, you could also click on the @import-button. That way you will be presented by a neat code for your CSS-file, looking somewhat like the following:You need to reply to the topic in order to see the code resources You'll also get the second piece of code as with the HTML-way: Now, the first code could either be placed between your
Then it just remains to apply the second piece of code to a CSS class, just as with the HTML-method. Notes
|
| This resource belong to this community unless differently stated. No reproduction possible without our agreement, in accordance with article L122-1 of the CPI. |
