Custom Fonts in CSS: Achieving Consistency and Priority
When customizing your website's typography to match specific design requirements, using custom fonts is a common approach. For PublicInput users seeking to integrate custom fonts, such as those from Google Fonts or Adobe, into their sites, here's how you can ensure consistency and priority across your headers and body fonts.
Importing Fonts
@import the font at the top of your custom CSS block:
@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');
The above import should be pulled from your font provider, such as Google or Adobe.
Applying Fonts
For paragraph text, use the 'important' flag to ensure wide application:
p {
font-family: 'Rubik', serif !important;
}Apply a consistent font across headers and certain classes without qualifiers, ensuring widespread application:
h2,
h3,
h4,
.navbar-brand a,
.project-title,
.project-name {
font-family: 'Rubik', 'Georgia', serif !important;
}
Be sure to update the above blocks
Best Practices
Although the '!important' modifier is typically advised against in base style sets, it is very helpful when modifying base styles to ensure that your custom fonts are applied consistently across your project.