Question 415363 in Html Question posted in
Some basic documentation can be found here.

Html – How can I remove fill color of a text and combine multiple fonts in css?

I want to achieve this look for the header on my website. Check the image for reference.

For example, in the word "Creative," I want the "t" to be a different font and have no fill. In the word, "Impactful," I want the letter "f" to be a different font from the rest of the word and have no fill.
Creative, Impactful, Innovative

Tags:

3

Answers


  1. 0

    You can use span inside the parent text tag for the individual letter tha you want to be different and give it a different style. For example in your case:

    <p>
  Impact<span class="different-letter">f</span>ul
</p>

    As you can see we wrapped the letter f with a span and used class to give it a different style than other letters.

    and for the outline effect you can try this css styling:

    .different-letter {
  color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke: 3px black;
}
    Login or Signup to reply.
  2. 0

    You can achieve this by doing this.

    index.html

    <h1 class="custom-header">
  Crea<span class="different-font no-fill">t</span>ive
  Impac<span class="different-font no-fill">f</span>ul
  Inn<span class="different-font no-fill">o</span>vative
</h1>

    style.css

    .custom-header {
  font-family: 'Montserrat', sans-serif; /* Main font for the header */
  font-size: 48px;
  line-height: 1.2;
  color: #000; /* Main text color */
}

.different-font {
  font-family: 'SecondaryFont', serif; */
}

.no-fill {
  color: transparent;
  -webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;
}
    Login or Signup to reply.
  3. 0

    Use a span inside parent for the different text and then you can apply styles specific to that span element

    span {
    color: transparent;
    -webkit-text-stroke: 2px orange;
    font-style: italic;
}

p {
  color: orange;
  font-size: 48px;
  font-weight: bold;
}
    <p>Impact<span>f</span>ull</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search