/css-fonts-hover-demo

A demo of the use of Google Fonts, CSS hover pseudoclass, and a content security policy that whitelists Google Fonts

Primary LanguageHTML

Google Fonts and CSS Hover Demo

Using Google Fonts

See the <head> in index.html which links Google Fonts Lato and Saira - Google Fonts provides you with the <link> element for adding fonts, and the CSS font-family property:

In index.html:

<link href="https://fonts.googleapis.com/css?family=Roboto:
    100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|
    Saira+Stencil+One&display=swap&subset=cyrillic,cyrillic-ext,
    greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">

In styles.css:

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Saira Stencil One', cursive;
}

Using the CSS Hover Pseudo-class

Check W3School's resource on CSS Pseudoclasses, especially if you would like to change the appearance of <a href=""> elements when they are visited, unvisited, active or hovered over.

The :hover Pseudo-class can be used to add CSS properties to many elements when the mouse is hovered over the element:

See styles.css for more examples, the following selects all <h1> elements and makes them red and the cursor a pointer when the mouse is hovered over the <h1>:

h1:hover {
    color: red;
    cursor: pointer;
}