Posted in fonts
2800
3:12 am, December 12, 2023
 

Quick Embed code for Titillium Web Google Font

Quick Embed code for Titillium Web Google Font and a bit of test code to see if the font is working properly. Im not sure if including all styles of this font is a good idea. Who even uses italic these days... (probably a lot of people or AI's? :)

I always find its a good idea to include the sans-serif font in the font-family tag as well, so it does not use the default browser font, before it loads.

For some reason the font was not loading if i just added the class, so had to make it a div not a p.

This font reminds me a bit of the ubuntu font... hmm 🦊

HTML

<div class="titillium mb-3">Hi there, i am a test of the font Titillium Web</div>
<div class="titillium upper mb-3">Hi there, i am a test of the font Titillium Web in uppercase or shouty case!</div>
<div class="titillium italic mb-3">And i guess we should not forget the italic lovers here</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
.titillium {
	font-family:"Titillium Web", sans-serif;
  	font-size:22px;
}
.upper {
	text-transform:uppercase;
  	font-size:22px;
}
.italic {
	font-style:italic;
  	font-size:22px;
}
Hi there, i am a test of the font Titillium Web
Hi there, i am a test of the font Titillium Web in uppercase or shouty case!
And i guess we should not forget the italic lovers here

External Link for Quick Embed code for Titillium Web Google Font

View Statistics
This Week
31
This Month
103
This Year
2666

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
If you work on something a little bit every day, you end up with something that is massive.
Kenneth Goldsmith
Random CSS Property

scroll-margin-block-start

The scroll-margin-block-start property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
scroll-margin-block-start css reference