Search code examples
cssfontswebfontsgoogle-fonts

How to use CSS to modify a font?

Previously we used the font 'World of Water' which supports this symbol: https://codepen.io/jaygray/pen/gvLYmW

<img src='/static/image/onto_symb_w421_h421.png'>

Now we would like to use a web font and have found one similar to 'World of Water' - Convergence (https://fonts.google.com/specimen/Convergence)

How to construct the character on the above Codepen in CSS?

Here are two attempts.

First: outlined white on a dark blue background: https://codepen.io/jaygray/pen/eVdqbj

Second: outlined white on a light blue background: https://codepen.io/jaygray/pen/rJMXPZ

The problems with #1 and #2 are that the lower bar is too wide and does not have the outline.

How to slightly reduce the width of the lower bar, add an outline to the bar, and center the bar under the letter 'o'?

(note: lower bar in #2 is blue so it is easier to see. it should be white with blue outline.)

Solution

  • You should use pseudo-elements to create a new element, which you can modify all you want:

    .onto::after {
  content: '';
  position: absolute;
  left: .1em;
  top: 100%;
  right: .1em;
  bottom: -.1em;
  background-color: white;
  outline: 1px solid #0379C4;
}

    And if you want the character to remain at the same level, you need to use:

    transform: scale(.8);

    https://codepen.io/anon/pen/LQbRxg