You don't have to settle with the default fonts that are on your machine for web pages. Adding a custom font to your website is very easy process to do.
Find a font you have permission to use your website and include the files in your project.
@font-face {
font-family: my-font-name;
src: url(path/to/font.eof),
url(path/to/font.woff),
url(path/to/font.woff2)
}
font-family in your CSS
.css{
/*Make sure you include a fallback */
font-family:my-font-name, Arial, sans-serif;
}
There is always a cost doing something fancy on the web. Custom fonts are the same way.
These are some alternatives to using a self hosted font type. These are traditionally more optimized for the web world.
.my-div{
font-family: 'Roboto', sans-serif;
}
Icon Font Libraries are an incredible way to speed up your development time and spend less time cutting out small images.
It takes a set of Scalable Vector Graphic icons and compresses them into a font file for you to use.
Flexbox provides a more predictive page layout for responsive screens. It doesn't use floats and adjusts to the available space better than traditional floats. Flexbox aims to fill all available space without overflowing its container.
It has gained a lot of popularity over the years. It doesn't support older versions of IE.
The flex container is the element that is wrapping all of the items you want to align.
To implement Flexbox, we need to apply a property to a container.
.container{
display:flex;
}
See the Pen UA-Flex-Flex by Jon (@Middaugh) on CodePen.
Flex Direction is a relatively unique CSS property. It dictates the actual direction and orientation.
row default - flows content from left to rightrow-reverse - flows from right to leftcolumn - vertically orients content from top to bottomcolumn-reverse - vertically orients content from bottom to topSee the Pen UA-Flex-Flex-Direction by Jon (@Middaugh) on CodePen.
By default, flex will want to fit everything into one row/column. Flex wrap allows the flex items to wrap if needed.
nowrap - default - All on one linewrapwrap-reverseSee the Pen UA-Flex-Flex-Wrap by Jon (@Middaugh) on CodePen.
Justify Content defines how flex items are aligned across the main axis.
flex-start default - align to the start of the containerflex-end - aligns to the end of the containercenter - items are aligned to the center. Similar to margin:autospace-between Items become even spaced. First items butts up against start point and last element butts
up against the end point.space-aroundItems are evenly spaced through out the available space.See the Pen UA-Flex-Justify-Content by Jon (@Middaugh) on CodePen.
Flex align defines how items are positioned over the intersecting axis.
stretch - Fill the containerflex-start - positions items in very start of the flex containerflex-end - positions elements at the very end of the flex containercenter - centers items based on their overall heightbaseline - aligns based off the contentSee the Pen UA-Flex-Flex-Align by Jon (@Middaugh) on CodePen.
Align content defines the alignment of content when there is more than one row/column. This property doesn't do anything if there is only one line of content.
stretch - default - takes up all available spaceflex-start - compresses all elements to the start of the container flex-end - compresses all elements to the end of the container center- compresses all elements to the end of the container space-betweenspace-aroundSee the Pen UA-Flex-Align-Content by Jon (@Middaugh) on CodePen.
orderflex-growflex-shrinkflex-basisFlex items are ordered as they appear from top to bottom in source code. The order property allows to you position the display order as you need.
This can be useful as you can better arrange items going from desktop to mobile or vice versa.
See the Pen UA-Flex-Item-Order by Jon (@Middaugh) on CodePen.
Sets the proportion of how much space you want an element to take up. By default, it is set to 0. Setting all items to 1 will evenly distribute space. Setting 2 will try to take up twice as much space.
It accepts positive unitless numbers
See the Pen UA-Flex-Item-Flex-Grow by Jon (@Middaugh) on CodePen.
Creates the ability for a flex item to shrink.
I've been getting inconsistent results when trying to figure this one out.
Sets the size of an element before the remaining space is calculated and distributed.
See the Pen UA-Flex-Item-Flex-Basis by Jon (@Middaugh) on CodePen.