Now we have configured for the P, for the paragraph, the font Pacifico, which is linked before. In this example, we choose Amatic SC font.įinally, we just have to place Amatic SC, which is the font name, in the family parameter. Then, we’ll come back to Google and choose another font. Firstly, let’s copy the link tag used before. To explain it better let’s link a second font from Custom Google Fonts. So if you want to use a different font from Custom Google Fonts you should only change the font name in the “family” parameter.
FONTY GOOGLE HOW TO
How to use other fonts from Custom Google Fonts Īs we have the text with the P tag it will apply only to this paragraph. Then, this is how it must looks like:įor instance, if you want the opposite, to apply only the font to the paragraph, not to the heading, it would place P instead of the h1. Now, we have the paragraph with the standard font and the heading tag, the H1, with the new font. This way, placing in h1 instead of body, we’re telling the browser only to apply this font to the h1 tag. In this case, you must go in the style and place h1, which is the equivalent of the heading tag used. But, let’s say you only want to apply this font to the heading tag, not to the paragraph. We set the font family for all website body. We have only a header tag, an h1 tag, and then, a paragraph tag. In the example webpage, we have a simple structure. Setting the font family for different HTML elements To set this, we will use the attribute font family with the Pacifico value, which is the font we have just linked from Google.Īfter that, when we save the page and reload it, we can see how it looks like with the new font Pacifico. So it is a small style sheet we will use to set a font to HTML body. To do that, you should use the style tag “ “. With this, we tell our browser that we want to use this font on our web page. For do that, we must make the changes using a CSS Style Sheet. So now we have just linked the font to our HTML Website.īut, we don’t set anything yet. The copy of our link tag should be like this: This name must be exactly the same as that found on Google Fonts. Īfter that, inside the href attribute, we must add the Source name to the right of the “ Family” parameter. Now, we should copy this link from google fonts and paste on our head link. To find it, let’s just write down the font name Pacifico in Google Fonts Search Box. Remember: this link must be placed in the head of your HTML file. To do that, we will use the link tag “ “. Now, you should choose a font, and then you’ll have to link this font in your Website head. Gustavo Gallas uses the example of the website as the image below, initially, without a custom font set: In this article, we will use the Pacifico Font. There are many options of fonts you can choose for use in your HTML5 Website. To find the font you want, you should access the Google Fonts. How to use Custom Google Fonts on our HTML5 Website
How to use Custom Google Fonts on our HTML5 Website.
0 kommentar(er)
