How to make one part of header text different font and add dashes around whole header text?

Question

I'm trying to create something like this:

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.

Niels

Simone Rossaini · Accepted Answer · 2020-05-08T12:39:23.383

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;
}

 h2.background:before{
    border-top: 2px solid #dfdfdf;
    content:"";
    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;
    font-family:arial;
}


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>

edited May 08 '20 at 12:39

answered May 08 '20 at 12:20

Simone Rossaini

8,115
1
13
34

Do you know how to add dashes to? – NielsStenden May 08 '20 at 12:21
When i use it makes the font italic without me saying it anywhere? I just want to apply different font, not styles. – NielsStenden May 08 '20 at 12:27
use css for change you font/style, you add my css? – Simone Rossaini May 08 '20 at 12:30
Im using item now with css .bold-text{Font-family: other} – NielsStenden May 08 '20 at 12:37
I just need to know dashes now – NielsStenden May 08 '20 at 12:37
i change my code with dashes to, acept answer and upvote thanks – Simone Rossaini May 08 '20 at 12:39
Hi, it works but only the dashes are on full width of site, I would like to have same as on image in post. – NielsStenden May 08 '20 at 12:43
adapt width of h2 or change width of dash. where is the problem? – Simone Rossaini May 08 '20 at 12:44
All my other with elements have #fff background now, how can i reset this and still to apply on what you made? – NielsStenden May 08 '20 at 12:47
can you apple rule css directly on the span with style – Simone Rossaini May 08 '20 at 12:49
Im new to this, but the css you written is applying on other elements on site to..If i remove ur css its all good again so we need custom names – NielsStenden May 08 '20 at 12:50
Delete span{ code} to css i write, and add all voice of that directly to style of span – Simone Rossaini May 08 '20 at 12:52
Oke, got it. How can i decrease widths of line now? – NielsStenden May 08 '20 at 12:54
You can control width of all h2 with width:100px(example) or h2.double:after width – Simone Rossaini May 08 '20 at 12:57
Hi, all the dashes have different sizes now, width of total div is for example 100px but if text is 90, lines will be 5 pixels each(left and right), is it possible to have all lines same width of div is different each time? – NielsStenden May 11 '20 at 10:25

How to make one part of header text different font and add dashes around whole header text?

1 Answers1