Solution 1 :

This is simple example with other font:

h2 {
font: 33px sans-serif;
margin-top: 30px;
text-align: center;
text-transform: uppercase;

h2.background {
position: relative;
z-index: 1;

    border-top: 2px solid #dfdfdf;
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 50%; left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;

span { 
    /* to hide the lines from behind the text, you have to set the background color the same as the container */ 
    background: #fff;
    padding: 0 15px;

h2.double:before { 
/* this is just to undo the :before styling from above */
border-top: none; 

h2.double:after {
border-bottom: 1px solid blue;
-webkit-box-shadow: 0 1px 0 0 red;
-moz-box-shadow: 0 1px 0 0 red;
box-shadow: 0 1px 0 0 red;
content: "";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute;
top: 45%; left: 0; right: 0;
width: 95%;
z-index: -1;
<h2 class="background double"><span style='font-family: Geogrotesque Regular!important;' >FIRST</span><span style='font-family: cursive!important;'>TWO</span></h2>

Problem :

I’m trying to create something like this:

enter image description here

To start that design I would like first to create one part of header text bold(using different font), how can i accomplish this?

Currently this spawns my header title:

 <h2 class="h1  section-header--left" style="font-family: Geogrotesque Regular; color: #071435; font-size: 22px">MEEST POPULAIR</h2>

To make text bold I use font “Geogrotesque SemiBold”, does anyone know how I can add this css in html line and create the design I want? So text “Meest” should be font “Geogrotesque Regular” and text “Populair” should be font “Geogrotesque SemiBold”.

Would be nice if you know css to create dashes around header to.



Comment posted by NielsStenden

Do you know how to add dashes to?

Comment posted by NielsStenden

When i use it makes the font italic without me saying it anywhere? I just want to apply different font, not styles.

Comment posted by Simone Rossaini

use css for change you font/style, you add my css?

Comment posted by NielsStenden

Im using item now with css .bold-text{Font-family: other}

Comment posted by NielsStenden

I just need to know dashes now


Leave a Reply

Your email address will not be published. Required fields are marked *